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

В этой статье мы собираемся показать вам как используя обычный JavaScript сделать:

1. Добавить текст в буфер обмена, с помощью события, например нажатие на кнопку.
2. Изменить содержимое буфера, когда пользователь что-нибудь копирует.

API, которое будем мы использовать не требует каких либо дополнительных библиотек, и имеет почти идеальную поддержку среди браузеров.

Копирование по клику

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

Для реализации, мы будем использовать крутой JavaScript метод именуемый execCommand(). Он позволяет нам вызывать различные события связанные с изменением контента, например сделать текст жирным/курсивом, отменить действие или повтор его, а также копировать/вырезать/вставить.

Это сработает точно так же, как нажатие CTRL/Cmd+C на клавиатуре, итак для того, чтобы скопировать любой текст, для начала нам необходимо его выделить. В JavaScript это возможно благодаря Selection API, который позволяет нам программно выделить текст в любом HTML элементе на странице:

var button = document.getElementById("copy-button"),
    contentHolder = document.getElementById("content-holder");

button.addEventListener("click", function() {

    // Нам понадобится объект диапазона и выделения
    var range = document.createRange(),
        selection = window.getSelection();

    // Очищаем выделение от предыдущей информации
    selection.removeAllRanges();

    // Выделяем весь контент в параграфе contentHolder.
    range.selectNodeContents(contentHolder);

    // Добавляем диапазон в выделение.
    selection.addRange(range);

    // Копируем выделенное в буфер обмена.
    document.execCommand('copy');

    // Можем очистить выделение.
    selection.removeAllRanges();

}, false);

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

Изменить скопированный текст

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

JavaScript предоставляет нам события copy() и paste(), но все спроектировано таким образом, что если содержимое в буфере обмена, то оно в безопасности:

• В обработчике события copy мы не можем прочитать что записано в буфер, так как здесь может быть личная информация к которой у нас нет доступа. Тем не менее, мы можем перезаписать данные в буфере обмена.
• В обработчике события paste, всё наоборот: мы можем прочитать данные, но не можем изменить их.

Так как мы хотим прочитать и записать в одно время, нам понадобиться Selection API еще раз. Вот решение:

document.addEventListener('copy', function(e){

    // Нам необходимо предотвратить стандартное копирование,
    // иначе все просто скопируется как обычно.
    e.preventDefault();

    // Событие не дает нам доступ к буферу поэтому 
    // нам надо добавить выделение с помощью Selection API.
    var selection = window.getSelection().toString();

    // Трансформируем выделенное как хотим
    // В примере мы кодируем HTML код.
    var escaped = escapeHTML(selection);

    // Вставляем измененный текст в буфер. 
    e.clipboardData.setData('text/plain', escaped);

});

Если вам нужно больше контроля над событиями копировать/вырезать/вставить, вы можете использовать библиотеку, такую как clipobard.js. В них есть много возможностей и предоставляют хороший API для управления буфером обмена.

Надеюсь, что эта статья вам понравилась!