DevGang
Авторизоваться

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

#JavaScript
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

В этом месте могла бы быть ваша реклама

Разместить рекламу