• Главная
>
• JQuery

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

Копирование в буфер обмена с использованием 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 и новее. Однако всегда стоит проверять работоспособность кода в конкретных браузерах целевой аудитории.

Важным ограничением этих методов является то, что они могут копировать только текстуальные данные, и все форматирование теряется в процессе, поскольку данные копируются в поле ввода типа "text".

Если Вам нужно скопировать текст в буфер обмена с HTML, то потребуется другой подход. Но это тема для другой статьи.