👩‍💻 Копирование текста по кнопке

16 февраля 2025 г.Frontender's notes [ru]
👩‍💻 Копирование текста по кнопке | 🔁 Новости из телеграм - Ghostbase News

👩‍💻 Копирование текста по кнопке

Создайте простую страницу с текстовым полем и кнопкой. При нажатии на кнопку содержимое текстового поля должно копироваться в буфер обмена. После успешного копирования рядом с кнопкой должно появляться сообщение "Текст скопирован!".

Решение задачи🔽

<input type="text" id="textInput" placeholder="Введите текст">

<button id="copyButton">Копировать</button>

<span id="message" style="display: none; color: green;">Текст скопирован!</span>

const copyButton = document.getElementById('copyButton');

const textInput = document.getElementById('textInput');

const message = document.getElementById('message');

copyButton.addEventListener('click', async () => {

try {

await navigator.clipboard.writeText(textInput.value);

message.style.display = 'inline';

setTimeout(() => {

  message.style.display = 'none';

}, 2000);

} catch (err) {

alert('Не удалось скопировать текст');

}

});