Для реализации данного функционала в JavaScript можно использовать метод Document.execCommand('copy'), который позволяет копировать выделенный текст в буфер обмена браузера.
Сначала необходимо создать кнопку в HTML-разметке, на которую будет производиться клик:
<button id="copyButton">Копировать</button>
Затем в JavaScript создадим обработчик события click для этой кнопки:
const copyButton = document.getElementById('copyButton'); copyButton.addEventListener('click', copyTextToClipboard);
Функция copyTextToClipboard будет выполнять следующие действия:
function copyTextToClipboard() { // Выбираем элемент, содержимое которого нужно скопировать const textToCopy = document.getElementById('textToCopy'); // Создаем временный элемент <textarea> для копирования текста в буфер обмена const tempTextarea = document.createElement('textarea'); tempTextarea.value = textToCopy.textContent; // Добавляем временный элемент <textarea> в DOM, чтобы его можно было выделить document.body.appendChild(tempTextarea); // Выделяем содержимое временного элемента <textarea> tempTextarea.select(); // Выполняем команду копирования текста в буфер обмена браузера document.execCommand('copy'); // Удаляем временный элемент <textarea> из DOM document.body.removeChild(tempTextarea); // Показываем сообщение "Скопировано" alert('Скопировано'); }
Обратите внимание, что элемент, содержимое которого нужно скопировать, должен иметь уникальный идентификатор (например, id="textToCopy"
), чтобы можно было получить ссылку на него.
Текст, находящийся внутри этого элемента, будет скопирован в буфер обмена при клике на кнопке, а затем всплывет сообщение "Скопировано".