Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

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

Короткий ответ

navigator.clipboard.writeText() копирует строку и возвращает промис:

await navigator.clipboard.writeText('Hello from the clipboard');

Кнопка копирования

Копируйте текст элемента по нажатию и показывайте короткое подтверждение:

<code id="promo">SUMMER25</code>
<button id="copy">Copy</button>
<script>
  const button = document.getElementById('copy');
  button.addEventListener('click', async () => {
    const text = document.getElementById('promo').textContent;
    try {
      await navigator.clipboard.writeText(text);
      button.textContent = 'Copied!';
    } catch {
      button.textContent = 'Copy failed';
    }
    setTimeout(() => (button.textContent = 'Copy'), 1500);
  });
</script>

Чтение из буфера

readText() читает буфер обмена. Браузер сначала спрашивает разрешение у пользователя:

const text = await navigator.clipboard.readText();
input.value = text;

Частая ошибка

Буфер обмена работает только на защищённых страницах (https или localhost) и только после действия пользователя, например клика. Вызов сразу при загрузке страницы отклоняется, поэтому всегда обрабатывайте ошибку.

navigator.clipboard.writeText('text').catch((error) => {
  showMessage('Press Ctrl+C to copy');
});

Функции из этого ответа

  • await — Ждёт результата промиса и возвращает его значение.
  • try...catch — Перехватывает ошибки, чтобы программа не остановилась.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.