Как скопировать текст в буфер обмена на jQuery и JavaScript
Обеспечение возможности копирования содержимого элемента в буфер обмена на веб-странице - важное удобство для пользователей. Это позволяет быстро и легко копировать данные в системный буфер обмена без необходимости вручную выделять и копировать текст.
Копирование в буфер обмена с использованием jQuery
Следующий фрагмент кода показывает, как можно скопировать текст из указанного элемента в буфер обмена при помощи jQuery:
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
В этой функции выполняются следующие шаги:
- Создается временное скрытое текстовое поле с помощью
- Это поля добавляется в тело документа.
- Значение этого поля устанавливается равным текстовому содержимому элемента, Полученному через $(element).text().
- Содержимое поля выделяется с помощью .select().
- Команда document.execCommand("copy") копирует выделенный текст в буфер обмена.
- Временное поле затем удаляется из документа.
Копирование в буфер обмена с использованием "чистого" JavaScript
Для случаев, когда использование jQuery не предполагается, можно реализовать функцию копирования в буфер обмена на "чистом" JavaScript. Пример такой функции:
function copyToClipboard(elementId) {
var aux = document.createElement("input");
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
}
Процесс, по сути, повторяет описанный ранее для jQuery
Ограничения и поддержка браузерами
Что касается совместимости с браузерами, то указанные выше методы работают в большинстве современных браузеров: Google Chrome начиная с 43 версии, Internet Explorer 10 и новее, Firefox 41 и новее, Safari 10 и новее. Однако всегда стоит проверять работоспособность кода в конкретных браузерах целевой аудитории.
![warning icon](http://local-winkomp-cms.ru/admin/mod/ckeditor422/plugins/castom_div/img/warning.png)
Важным ограничением этих методов является то, что они могут копировать только текстуальные данные, и все форматирование теряется в процессе, поскольку данные копируются в поле ввода типа "text".
Если Вам нужно скопировать текст в буфер обмена с HTML, то потребуется другой подход. Но это тема для другой статьи.