Копирование строк в буфер обмена с использованием чистого Javascript
Чтобы скопировать строку в системный буфер обмена в браузере без использования каких-либо зависимостей, таких как clipboard.js, используйте эту функцию:
function copyStringToClipboard (str) { var el = document.createElement('textarea'); el.value = str; el.setAttribute('readonly', ''); el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el); }
Примечание. Если пользователь выбрал что-либо при запуске функции, этот выбор будет отменен. Если вам нужно сохранить выбор, см. Эту статью Hackernoon для более сложного решения.
Вы можете использовать это так:
copyStringToClipboard("abc123");
Совместимость
В этом решении используется только базовый Javascript (не требующий никаких функций ES6), API DOM, существующий десятилетиями и document.exec('copy');
, согласно Mozilla, данный подход совместим со всеми основными браузерами, включая Internet Explorer, начиная с IE9.
Как это устроено
Мы создаем новый элемент textarea
, значение которого мы устанавливаем в строку для копирования (например, "abc123"
в нашем примере использования выше).
Чтобы не вводить пользователя в заблуждение и, что более важно, программы чтения с экрана, мы установили его только для чтения readonly
и сместили влево -9999px
, что гарантированно будет находиться вне области просмотра для всех практических целей.
Только после смещения элемента за пределы области просмотра мы добавляем его в DOM, чтобы он не отображался даже доли секунды.
Теперь мы можем выделить текст внутри элемента с помощью el.select()
и скопировать его в буфер обмена с помощью document.execCommand('copy');
.
Наконец, мы удаляем элемент из DOM.