JavaScript «Нажми, чтобы скопировать»: методы реализации функциональности «Нажми, чтобы скопировать»

Вот несколько методов, которые вы можете использовать в JavaScript для реализации функции «нажмите, чтобы скопировать»:

  1. Использование метода Document.execCommand():

    function copyToClipboard(text) {
    const element = document.createElement('textarea');
    element.value = text;
    document.body.appendChild(element);
    element.select();
    document.execCommand('copy');
    document.body.removeChild(element);
    }
  2. Использование API буфера обмена:

    function copyToClipboard(text) {
    navigator.clipboard.writeText(text)
    .then(() => {
      console.log('Text copied to clipboard');
    })
    .catch((error) => {
      console.error('Failed to copy text: ', error);
    });
    }
  3. Использование API Async Clipboard (современные браузеры):

    async function copyToClipboard(text) {
    try {
    await navigator.clipboard.writeText(text);
    console.log('Text copied to clipboard');
    } catch (error) {
    console.error('Failed to copy text: ', error);
    }
    }
  4. Использование скрытого элемента ввода:

    function copyToClipboard(text) {
    const element = document.createElement('input');
    element.style.opacity = '0';
    element.value = text;
    document.body.appendChild(element);
    element.select();
    document.execCommand('copy');
    document.body.removeChild(element);
    }

Эти методы позволяют копировать текст в буфер обмена, когда пользователь нажимает на указанный элемент или вызывает определенное событие.