Копирование строк в буфер обмена с использованием чистого 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.