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

Копирование текста в буфер обмена — полезная функция, которую можно легко реализовать на веб-сайте или в веб-приложении. Это избавляет пользователей от необходимости вручную выделять текст и использовать контекстное меню или горячие клавиши для копирования.

Содержание

Пример использования
JavaScript-код
Как это работает?

Пример использования

Рассмотрим простой пример, в котором мы создадим кнопку для копирования текста:

<div>
<p id="text-to-copy">Это пример текста для копирования</p>
<button onclick="copyToClipboard()">Копировать</button>
</div>

В этом примере текст заключен в элемент <p>, а кнопка имеет атрибут onclick, который вызывает функцию copyToClipboard().

JavaScript-код

Теперь напишем JavaScript-код для реализации копирования текста:

function copyToClipboard() {
const text = document.getElementById('text-to-copy').innerText;
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.setAttribute('readonly', '');
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
alert(`Скопировано: ${text}`);
}

Как это работает?

Получение текста: Мы получаем текст из элемента с id text-to-copy с помощью innerText.
Создание textarea: Создаем элемент textarea, в который помещаем текст для копирования.
Настройки textarea:
- Устанавливаем атрибут readonly, чтобы текст не был изменяемым.
- Устанавливаем position: absolute и left: -9999px, чтобы скрыть элемент с экрана.
Добавление textarea в DOM: Добавляем созданный textarea в документ.
Выделение текста: Используем метод select() для выделения текста в textarea.
Копирование текста: Выполняем команду document.execCommand('copy') для копирования текста в буфер обмена.
Удаление textarea: Удаляем textarea из DOM.
Уведомление пользователя: Показываем пользователю сообщение о копировании текста.

Этот код обеспечивает простую и эффективную реализацию функционала копирования текста, который можно адаптировать под любые нужды. Например, вы можете добавлять различные сообщения, стили и даже анимации, чтобы улучшить пользовательский опыт.