Как скопировать текст по нажатию?

Question

[Артур Левенсон]

подскажите пожалуйста, как сделать так, чтобы по нажатию на button "копировать" копировался в буфер обмена вот такое вот значение: 7777777.

https://codepen.io/kiskiskit/pen/MWopxBj

Comments

[Kovalsky]

Тема гуглится в секунду, репорт

Answer 1

[Stalker_RED]

Это вариант с многоразовым использованием textarea


Если вам надо разово скопировать, вот вариант подчищающий за собой
(но при повторном вызове он вынужден будет заново пересоздать элемент):


Есть еще новое API navigator.clipboard.writeText, но не везде работает, и запрашивает разрешение на работу с буфером. А старый добрый execCommand('copy') запрашивает разрешение только в IE.

Answer 2

[Сергей delphinpro]

export const copyToClipboard = function (text, onComplete) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text)
      .then(() => {
        if (typeof onComplete === 'function') onComplete();
      })
      .catch(err => {
        console.warn('Copy fail', err);
      });
  } else {
    let area = document.createElement('textarea');
    document.body.appendChild(area);
    area.value = text;
    area.select();
    document.execCommand('copy');
    document.body.removeChild(area);
    if (typeof onComplete === 'function') onComplete();
  }
};

const element = document.querySelector('...');
copyToClipboard(element.innerText, () => {
    alert('Copied to clipboard!' + '\n' + element.innerText);
});