JavaScript Clipboard API: скопировать текст по клику

navigator.clipboard.writeText копирует строку в современных браузерах при защищённом контексте и обычно после явного действия пользователя. Обработайте отказ доступа, чтобы интерфейс мог показать понятный результат.

Рабочий пример

copyButton.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText(output.value);
    status.textContent = 'Скопировано';
  } catch {
    status.textContent = 'Не удалось скопировать';
  }
});

Запускайте вызов непосредственно из обработчика клика: браузеры ограничивают доступ к буферу обмена. copyButton, output и status — ссылки на элементы страницы.

Частый вопрос

Работает ли clipboard API на HTTP?

Обычно только на secure context, например HTTPS или localhost. Для других случаев покажите текст пользователю для ручного копирования.