Как скопировать в буфер обмена с помощью JavaScript

Иногда я использую сайты, на которых есть что-то, что мне нужно куда-то скопировать и вставить. Может быть, ключ API. Может быть, токен активации для приложения, которое я только что купил.

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

Как мы можем реализовать эту функцию на наших сайтах? Используя API буфера обмена!

Есть еще один способ заставить работать копирование / вставку, используяdocument.execCommand()функциональность. Я не собираюсь здесь рассматривать этот вариант. API буфера обмена должен стать преемником этой команды.

API буфера обмена доступен наnavigator.clipboardобъект:

navigator.clipboard

API буфера обмена появился относительно недавно, и не все браузеры его реализуют. Он работает в Chrome, современном Edge (на основе хрома), Firefox и Opera.

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

if (!navigator.clipboard) {
  // Clipboard API not available
  return
}

Теперь вы должны понять, что вы не можете копировать / вставлять из буфера обмена без разрешения пользователя.

Разрешение отличается, если вы читаете или записываете в буфер обмена. Если вы пишете, все, что вам нужно, это намерение пользователя: вам нужно поместить действие буфера обмена в ответ на действие пользователя, например, щелчок.

Запись в буфер обмена

Скажите, что у вас естьpэлемент на HTML-странице:

<p>Some text</p>

Вы создаете на нем прослушиватель событий щелчка и сначала проверяете, доступен ли API буфера обмена:

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
})

Теперь мы хотим скопировать содержимое этогоpв буфер обмена. Мы делаем это, просматриваяinnerTextэлемента, идентифицированногоevent.target:

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
  const text = event.target.innerText
})

Далее мы вызываемnavigator.clipboard.writeText(), заключив его в try / catch для обработки любой ошибки, которая может произойти.

Это полный код примера:

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
  const text = event.target.innerText
  try {
    await navigator.clipboard.writeText(text)
    event.target.textContent = 'Copied to clipboard'
  } catch (err) {
    console.error('Failed to copy!', err)
  }
})

Здесь вы можете увидеть и попробовать пример на Codepen

См. ПероПример записи API буфера обменаАвтор: Флавио Коупс (@flaviocopes) наCodePen.