КОПИРУЕМ ТЕКСТ В БУФЕР ОБМЕНА
Добавить в избранное
В этом обзоре мы рассмотрим, как с помощью нескольких строк кода на JavaScript реализовать функционал копирования в буфер обмена текста, размещенного на Вашем сайте или в веб-приложении.
Желание создать кнопку для копирования определенного контента, вместо его традиционного выделения и копирования с помощью контекстного меню или сочетания горячих клавиш, может быть обусловлено совершенно различными причинами, и, несомненно, отличной новостью является то, что реализация подобного функционала не вызывает никаких затруднений.
Итак, логика данного решения достаточно проста: создаем невидимый элемент textarea, в который копируем необходимый текст, с помощью кнопки Copy переносим его в буфер обмена и удаляем созданный элемент textarea из DOM.
Для начала создадим элементарный контент:
<p id="item-to-copy">Это какой-то текст</p>
<button onclick="copyToClipboard()">Copy</button>
</div>
Он не содержит никаких сюрпризов - это простой текст заключенный в абзац p и кнопка, выполняющая определенную функцию при нажатии. Для тега p, создан id, который используется в теле функции.
Теперь напишем JavaScript-код и разберем его детально:
const str = document.getElementById('item-to-copy').innerText;
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
}
Итак при нажатии на кнопку Copy:
1. мы получаем содержимое целевого элемента p,
2. создаем элемент textarea,
3. устанавливаем для textarea определенные параметры: делаем его значение равным содержимому целевого элемента p и определяем для него атрибут readonly,
4. создаем для textarea некоторые CSS-свойства: position: absolute и left: -9999px (для того чтобы скрыть элемент от пользователя),
5. затем мы добавляем textarea в DOM,
6. применяем для данного элемента метод select() (следует заметить, что select() можно применить только к textarea, с p этот метод работать не будет),
7. копируем необходимый контент с помощью document.execCommand('copy'),
8. наконец, мы удаляем созданный элемент textarea из DOM.
На данном этапе, попытавшись вставить текст с помощью сочетания кнопок Ctrl + V или с помощью пункта “Вставить” (“Paste”) контекстного меню, мы увидим что целевой контент элемента p находится в буфере обмена.
Для улучшения визуального эффекта можн добавить еще одну строку кода после removeChild():
alert(`Copied: ${str}`);
Теперь после копирования текста в буфер обмена мы видим соответствующее сообщение.