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

Категория: JavaScript · Язык: JavaScript · Обновлено:

В современном браузере текст копируют через navigator.clipboard.writeText(text). Clipboard API обычно доступен в secure context (HTTPS или localhost) и может требовать пользовательского действия; обработайте отказ Promise и сообщите о результате.

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

JavaScript
async function copyText(text) {
  if (!globalThis.navigator?.clipboard?.writeText) {
    throw new Error('Буфер обмена недоступен в этой среде');
  }
  await navigator.clipboard.writeText(text);
  return 'Скопировано';
}

Object.defineProperty(globalThis, 'navigator', {configurable: true, value: {
  clipboard: {writeText: async (text) => { globalThis.copied = text; }}
}});
const message = await copyText('Пример кода');
console.log(`${message}: ${globalThis.copied}`); // Скопировано: Пример кода

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

JavaScript
button.addEventListener('click', async () => {
  try {
    await copyText(codeElement.textContent);
    status.textContent = 'Скопировано';
  } catch {
    status.textContent = 'Не удалось скопировать';
  }
});

Условие

Что проверить

API отсутствует

HTTPS/localhost и поддержка браузера

Promise отклонён

Разрешение и пользовательский жест

Копируется неверный текст

textContent и выбранный DOM-элемент

Почему navigator.clipboard undefined?

Страница может быть открыта по HTTP, браузер не поддерживает API или контекст ограничен iframe/permissions policy. Проверьте secure context и настройки встраивания.

Нужен ли старый способ с execCommand?

document.execCommand('copy') устарел. Используйте его только для явно поддерживаемых старых браузеров и тестируйте доступность; для нового кода ориентируйтесь на Clipboard API.