Копирование текста в буфер обмена средствами jQuery

Здравствуйте, уважаемые читатели XoZbloga! Когда занимался разработкой нового облика этого сайта, то столкнулся с необходимостью предоставить возможность пользователю скопировать текст в буфер обмена. Это событие должно было происходить при клике на кнопку и предполагалось для реализации использовать JQuery. После долгих поисков я нашел плагин JQuery, размещенный на Github проект называется ZeroClipboard. Данная библиотека предоставляет способ скопировать текст в буфер обмена с помощью Adobe Flash и интерфейса Javascript.

И в этой небольшой статье постараемся разобраться как пользоваться ZeroClipboard.

Как использовать ZeroClipboard

Прежде всего, необходимо скачать сам плагин и флэш-файл ZeroClipboard. Не стоит забывать и о Javascript библиотеке — jQuery, куда же без нее?! 🙂 Затем уже можно подключить плагин к странице и разместить кнопку для тестирования:

<html>
  <body>
    <button id="copy-button" data-clipboard-text="Текст для копирования!" title="Кликни по мне.">Копировать
    </button>
    <script src="jquery.js"></script>
    <script src="ZeroClipboard.js"></script>
    <script src="main.js"></script>
  </body>
</html>

Далее в отдельном файле main.js создаем обработчик, который и будет использовать возможности ZeroClipboard.

$(document).ready(function(){
// Создаем новый экземпляр класса
var client = new ZeroClipboard($("#copy-button"), {
  moviePath: "ZeroClipboard.swf"
});
// После того как происходит загрузка флеш файла
client.on("load", function(client) {  
  // и завершено копирование в буфер
  client.on("complete", function(client, args) {
    // выводим результат
    alert(args.text);
  });
});
});

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

Устанавливаем текст в коде

Представим, что нам необходимо передать в буфер обмена пользователя предварительно заготовленный (возможно подобранный в соответствии с условием) текст, ничего лучше, чем явно задать его в коде — нет. Чтобы задать текст в коде Javascript и передать его, необходимо отследить соответствующее событие. Для этого нам нужна кнопка:

<button id="click-to-copy">Скопировать</button>

В первую очередь надо создать экземпляр объекта ZeroClipboard и указать путь до SWF файла.

var client = new ZeroClipboard( $("#click-to-copy"), {
    moviePath: "ZeroClipboard.swf",
    debug: false
});

С помощью этого экземпляра мы можем передать в буфер заготовленный текст. Для этого используем метод setText(), после того как отработало событие dataRequested (Данное событие срабатывает каждый раз, когда ZeroClipboard пытается вставить значение в буфер обмена). Более подробно в документации.

client.on("dataRequested", function(client, args) {
    client.setText("Вот и текст");
    $('#click-to-copy').hide(); // скрываем для наглядности кнопку
});

Передаем в буфер значение атрибута

Следующий вариант копирования — передача значения атрибута данных элемента. Вы можете задать текст для атрибута data-clipboard-text, и ZeroClipboard по умолчанию будет передавать значение данного атрибута в буфер. Поэтому:

<button id="copy-button" data-clipboard-text="Текст из атрибута!">Скопировать</button>

Далее как и в предыдущем примере, создаем экземпляр и ловим событие. Причем можно явно не указывать метод setText(), плагин сам все сделает, ведь мы задали текст в специальном атрибуте 🙂

var client1 = new ZeroClipboard($("#copy-button"), {
  moviePath: "ZeroClipboard.swf"
});

client1.on("load", function(client1) {  
  client1.on("complete", function(client1, args) {
    $('#copy-button').hide(); // скрываем для наглядности кнопку
  });
});

Копируем содержимое текстового поля

На мой взгляд самый востребованный вариант. Данный вариант позволяет определить HTML элемент, который необходимо обработать. Можно получить содержимое например блока div через this.Innerhtml или если это поле формы, то текст через this.TextContent.

<!-- Поле с текстом -->
<textarea name="clipboard-text" id="clipboard-text">Просто какой-то текст для копирования</textarea>
<!-- Кнопка копирования -->
<button data-clipboard-target="clipboard-text" id="target-to-copy">Скопировать</button>

Обратите внимание значение атрибута кнопки data-clipboard-target совпадает с идентификатором текстового поля. Это необходимо для того чтобы установить связь, из какого места следует брать содержимое при клике.

var client2 = new ZeroClipboard($("#target-to-copy"), {
  moviePath: "ZeroClipboard.swf"
});

client2.on("load", function(client2) {  
  client2.on("complete", function(client2, args) {
     // client2.setText(this.TextContent); // Это для текстового поля (можно не прописывать)
     // client2.setText(this.innerHTML); // Или для блока DIV (можно не прописывать)
     $('#target-to-copy').hide(); // скрываем для наглядности кнопку
  });
});

Полную документацию по плагину ZeroClipboard Вы сможете найти на странице Github проекта, ссылки выше.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!


Lingualeo