Скопируйте текст в системный буфер обмена на щелчке с JavaScript

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

Пусть начнется с настройки HTML:

COPY

Теперь мы можем начать функциональность JavaScript, начиная с объявления переменных для текста и элемента кнопки:

const keyTxt = document.getElementById("key-txt").value;
const keyBtn = document.getElementById("key-btn");

Далее мы добавим в кнопку «Слушатель событий»:

keyBtn.addEventListener("click", async () => {
  if (!navigator.clipboard) {
    alert("Copy functionality not supported");
  }
  try {
    await navigator.clipboard.writeText(keyTxt);
  } catch (err) {
    console.error("ERROR", err);
  }
});

Сначала мы проверяем, поддерживает ли браузер Navigator.clipboard который является частью API буфера обмена, который дает возможность отвечать на команды буфера обмена (вырезать, копировать и вставить), а также асинхронно читать и записать в буфер обмена. Если браузер поддерживает Navigator.clipboard Текст записан в буфер обмена.

Это все для этого урока, следует отметить, что аналогичная функциональность также может быть написана с помощью document.execcommand () Однако этот метод больше не рекомендуется, так как браузеры отказываются от его поддержки.

Оригинал: “https://dev.to/michaelburrows/copy-text-to-the-system-clipboard-on-click-with-javascript-1c0k”