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

Всем привет.

Хотя копирование текста в буфер кажется очень распространенным, это не встроенная функция в JavaScript.

Что б скопировать текст надо выполнить четыре простых шага.

1. Созда <textarea> элемент и вставить его в body

const textarea = document.createElement(‘textarea’);
document.body.appendChild(textarea);

2. Вставить нужный текст в <textarea>

textarea.value = text;
textarea.select()

Не все браузеры поддерживают метод select() (особенно мобильные). По этому для лучшей совместимости будем использовать метод setSelectionRange

textarea.setSelectionRange(0, 99999);

3. Копирования текста в буфер обмена

document.execCommand('copy');

execCommand встроенный метод для выполнения специальных действий (копирование, вставка, вырезка) с выделенным текстом. Тут можно прочитать больше.

4. Очистка и удаление временного элемента <textarea>

document.body.removeChild(textarea);

Конечно в реалтайме это остается незамеченной. Но если мы приостановим его в отладчике, мы увидим, что выполнение функции выглядит следующим образом.

Проверьте весь код нашей функции ниже.

const copyToClipboard = (text) => {
  const textarea = document.createElement('textarea');
  document.body.appendChild(textarea);
  textarea.value = text;
  textarea.select();
  textarea.setSelectionRange(0, 99999);
  document.execCommand('copy');
  document.body.removeChild(textarea);
};

Источник