Как скопировать текст в буфер обмена
Короткий ответ
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 — Перехватывает ошибки, чтобы программа не остановилась.