30 секунд в день ⏱ Скопируйте содержимое в буфер обмена

Введение

буфер обмена, копировать, совместимый

тестовое задание

复制内容到剪贴板Это требование часто встречается в процессе фронтенд-разработки.Большинство студентов часто открывают окно поиска и начинают искать библиотеки компонентов, написанные другими при разработке, и умные студенты начинают задумываться над проблемой:

• Каков сценарий использования продукта?
• Вам нужна совместимость со многими браузерами?
• Нужно ли часто использовать его в проекте?
• Нужно ли мне использовать дополнительные функции, предоставляемые сторонней библиотекой?

Когда сценарий использования продукта не большой и сложный, вы можете использовать этот параграф复制内容到剪贴板Код:

// 该源码来自于 https://30secondsofcode.org
const copyToClipboard = str => {
    const el = document.createElement('textarea');
    el.value = str;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);

    const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;

    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);

    if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
    }
};

анализ кода

Браузеры предоставляют нативный методdocument.execCommand('copy')реализовать复制内容到剪贴板, но у него есть предпосылка использования «когда вам нужно выбрать текстовое поле или поле ввода», поэтому создайтеtextareaТекстовое поле и расположите его так, чтобы оно не отображалось на экране:

const el = document.createElement('textarea');
el.value = str;
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);

для созданногоtextareaЭлемент выбирается и используется для копирования текстового содержимого внутри и, наконец, удаляется.textareaэлемент.

el.select();
document.execCommand('copy');
document.body.removeChild(el);

Зачем пропускать кусок кода?

На самом деле, это было сделано до сих пор复制内容到剪贴板, пропустить код — это оптимизация двух сценариев, вы можете выбрать, использовать ли эти два фрагмента кода в соответствии со сценарием разработки продукта:

• Включает ли сцена мобильные устройства
• Позволяет ли страница пользователю выбирать текст

Оптимизация мобильных устройств

На мобильных устройствах существует проблема «При выборе текстового поля появляется виртуальная клавиатура», из-за которой страница мерцает, а если телефон реагирует медленно, вы даже можете увидеть всплывающую и исчезнувшую виртуальную клавиатуру. Один из последних штрихов этого кода — сделать поле ввода доступным только для чтения:

el.setAttribute('readonly', '');

Совет. Используйте свойство только для чтения, чтобы предотвратить всплывающую виртуальную клавиатуру.

Дополнительная оптимизация китайского текста

Еще один последний штрих кода: если пользователь выбирает абзац текста и нажимает复制内容到剪贴板Выбранный текст исчезнет при копировании выделенного текста.Выбирать текстовое содержимое большим пальцем на экране мобильного телефона всегда очень неудобно.Исчезновение выделенного текста сильно повлияет на работу пользователя.

мы можем использоватьdocument.getSelectionРяд API выбора курсора, которые помогут нам сначала записать текстовый объект, выбранный пользователем ранее:

const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;

После завершения операции копированияselectedПримите решение и восстановите ранее записанный текстовый объект, ранее выбранный пользователем:

if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
}

Расти вместе

В запутанном городе неизбежно идти бок о бок伙伴Давайте расти вместе.

• Если вы хотите, чтобы статью увидело больше людей, нажмите点赞.
• Если вы хотите мотивировать второго ребенка, вы можете перейти кGithubдать小星星.
• Если вы хотите больше общаться с Xiaoer, добавьте WeChatm353839115.

Оригинал статьи изPushMeTop