clipboard.js - js скрипт для копирования текста в буфер

В этой статье рассмотрим скрипт clipboard.js, который можно использовать для организации копирования некоторого содержимого веб-страницы в буфер обмена.

clipboard.js - js скрипт для копирования текста в буфер

Clipboard.js – это современный скрипт, который используется для того чтобы предоставить пользователю возможность более просто скопировать (например, с помощью нажатия на кнопку) некоторую информацию представленную на странице сайта в буфер обмена. Работа данного скрипта опирается на API Selection and execCommand.

Демо Скачать clipboard.js
Скрипт работает в браузерах Chrome 42+, Firefox 41+, IE 9+ Opera 29+, Safari 8.
Преимущества скрипта clipboard.js:
  • Не требует для своей работы Flash (как например ZeroClipboard).
  • Не имеет зависимостей, т.е. не требует для своей работы наличие подключенной библиотеки jQuery.
  • Имеет очень маленький размер.

Основы работы с clipboard.js

Основные действия при работе со скриптом clipboard.js (копирование в буфер) представим в виде следующих действий:
  1. Скачать zip-архив, распаковать его и скопировать файл clipboard.min.js в необходимый каталог на сайте.
  2. Подключить файл clipboard.min.js к необходимым страницам на сайте.
    1. <script src="путь/до/clipboard.min.js"></script>
  3. Инициализировать Clipboard для необходимых элементов на странице, посредством передачи ему DOM-селектора, HTML-элемента или списка, состоящего из HTML-элементов. Т.е. необходимо функции-конструктору Clipboard передать элементы, при нажатии на которые информация будет копироваться в буфер.
    Например, инициализируем Clipboard для всех элементов на странице имеющих класс .btn-clipboard.
    1. <script>
    2. new Clipboard('.btn-clipboard');
    3. </script>
  4. Добавить атрибуты data-* инициализированным HTML элементам.
    Рассмотрим следующие варианты:
    1. Копирование текста из другого элемента
    1. <!-- Цель - элемент, содержимое которого необходимо скопировать (указываем id, например example1) -->
    2. <pre id="example1">
    3. ....
    4. </pre>
    5. <!-- Кнопка, при нажатии на которую, происходит копирование цели. Цель указывается с помощью атрибута data-clipboard-target -->
    6. <button class="btn-clipboard" data-clipboard-target="#example1">
    7. Скопировать в буфер обмена
    8. </button>
    2. Вырезать текст из другого элемента
    1. <pre id="example2">
    2. ....
    3. </pre>
    4. <!-- Для вырезания контента необходимо дополнительно указывать атрибут data-clipboard-action со значением cut -->
    5. <button class="btn-clipboard" data-clipboard-target="#example2">
    6. Скопировать в буфер обмена
    7. </button>
    3. Копирование в буфер текста из атрибута
    1. <!-- Кнопка, при нажатии на которую будет скопирован текст, находящийся в атрибуте data-clipboard-text -->
    2. <button class="btn-clipboard" data-clipboard-text="...">
    3. Скопировать в буфер обмена
    4. </button>

Пример создания кнопки, предназначенной для копирования информации в буфер

Рассмотрим пример, в котором создадим кнопку для элемента pre, при нажатии на которую контент этого элемента (pre) будет копироваться в буфер обмена.
  1. <!-- Цель (structurePage) - элемент, содержимое которого нужно скопировать -->
  2. <pre id="structurePage">
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="utf-8">
  7. <title>Пример HTML5 страницы</title>
  8. </head>
  9. <body>
  10. Содержимое страницы...
  11. </body>
  12. </html>
  13. </pre>
  14. <!-- Триггер - элемент, при нажатии на который будет скопирована цель -->
  15. <!-- В триггере цель устанавливается с помощью значения атрибута data-clipboard-target -->
  16. <button type="button" data-clipboard-target="#structurePage">Скопировать код</button>
  17.  
  18. <!-- Подключаем скрипт clipboard.min.js -->
  19. <script src="clipboard.min.js"></script>
  20. <script>
  21. // Инициализируем элемент button для всех элементов button, расположенных после pre
  22. new Clipboard('pre+button');
  23. </script>
jаvascript - скопировать содержимое элемента pre в буфер обмена

Дополнительные возможности clipboard.js

Рассмотрим основные возможности, которые предоставляет js-скрипт clipboard.js.

События clipboard.js

Действия при копировании информации в буфер можно отслеживать с помощью событий clipboard.js. Всего доступно 2 события. Первое событие (success) происходит после успешного копирования, а второе (error) возникает в случае ошибки (неудачи).
  1. var clipboard = new Clipboard('.btn');
  2. clipboard.on('success', function(e) {
  3. console.info('Действие:', e.action);
  4. console.info('Текст:', e.text);
  5. console.info('Триггер:', e.trigger);
  6. e.clearSelection();
  7. });
  8. clipboard.on('error', function(e) {
  9. console.error('Действие:', e.action);
  10. console.error('Триггер:', e.trigger);
  11. });

Указание источника копирования с помощью функции

Clipboard.js позволяет указывать цель (элемент, содержимое которого необходимо скопировать или текст) не только с помощью data-атрибутов, но и динамически с помощью функции. Это позволяет не вносить изменения в Ваш код HTML, т.е. избавляет Вас от необходимости добавлять к элементам атрибуты data и id.
Рассмотрим это на следующих примерах:
1. Динамическое установление цели (target).
  1. // инициализируем Clipboard для всех элементов на странице, имеющих класс .btn-clipbboard
  2. new Clipboard('.btn-clipboard', {
  3. // цель определяем с помощью функции. Она должна возращать необходимый элемент (например, следующий после инициированного)
  4. // цель - это элемент, содержимое которого необходимо скопировать.
  5. target: function(trigger) {
  6. return trigger.nextElementSibling;
  7. }
  8. });
2. Динамическое установление текста.
  1. // инициализируем Clipboard для всех элементов на странице, имеющих класс .btn-clipbboard
  2. new Clipboard('.btn-clipboard', {
  3. // текст определяем с помощью функции (например, значение атрибута aria-label)
  4. text: function(trigger) {
  5. return trigger.getAttribute('aria-label');
  6. }
  7. });

Примеры, использующие дополнительные возможности clipboard.js

Рассмотрим несколько примеров, в которых будем использовать дополнительные возможности, которые предлагает скрипт clipboard.js.
1. Пример динамического создания кнопок копирования для всех элементов pre на странице.
Рассмотрим пример, в котором с помощью кода jаvascript добавим кнопки ко всем элементам pre на странице для копирования соответствующего кода.
  1. //после загрузки страницы
  2. window.addEventListener('load', function() {
  3. // получить коллекцию элементов pre на странице
  4. var pre = document.getElementsByTagName('pre');
  5. // перебрать все элементы pre с помощью цикла for
  6. for (var i=0; i<pre.length; i++) {
  7. // создать контейнер div
  8. var divClipboard = document.createElement('div');
  9. // добавить к контейнеру div класс .bd-clipboard
  10. divClipboard.className = 'bd-clipboard';
  11. // создать элемент span (кнопку Копировать)
  12. var button = document.createElement('span');
  13. // добавить к элементу span класс .btn-clipboard
  14. button.className = 'btn-clipboard';
  15. // элементу span установить контент Копировать
  16. button.textContent = 'Копировать';
  17. // добавить элемент span в качестве дочернего к элементу div
  18. divClipboard.appendChild(button);
  19. // добавить элемент div перед pre
  20. pre[i].parentElement.insertBefore(divClipboard,pre[i]);
  21. }
  22. // инициализируем Clipboard для каждой кнопки
  23. var btnClipboard = new Clipboard('.btn-clipboard', {
  24. target: function(trigger) {
  25. console.log(trigger.parentElement.nextElementSibling);
  26. trigger.clearSelection;
  27. return trigger.parentElement.nextElementSibling;
  28. }
  29. });
  30. btnClipboard.on('success', function(e) {
  31. e.clearSelection();
  32. });
  33. });

Кнопки, добавленные ко всем HTML элементам pre на странице с помощью jаvascript
Добавление кнопок к pre элементам
 
Поднесение курсора к тексту копировать
Изменение изображения надписи копировать при поднесении к ней курсора
2. Пример, в котором будем использовать события clipboard.js для создания интерактивности процесса копирования в буфер.
Рассмотрим пример, в котором будем обрабатывать действия пользователя после того как он нажал на кнопку, выполняющей копирования информации в буфер. Если копирование информации в буфер прошло успешно, то изменим (на 3 секунды) текст кнопки на контент "Скопировано". В противном случае, если произошла ошибка при копировании, то изменим (тоже на 3 секунды) текст кнопки на "Нажмите Ctrl+C для копирования".
  1. // при успешном копировании
  2. btnClipboard.on('success', function(event) {
  3. // убираем выделение
  4. event.clearSelection();
  5. // изменяем текст триггера на Скопировано
  6. event.trigger.textContent = 'Скопировано';
  7. // Возращаем через 3 секунды текст триггеру на Копировать
  8. window.setTimeout(function() {
  9. event.trigger.textContent = 'Копировать';
  10. }, 3000);
  11. });
  12. // если копирование завершилось с ошибкой
  13. btnClipboard.on('error', function(event) {
  14. // изменяем текст кнопки
  15. event.trigger.textContent = 'Нажмите "Ctrl + C" для копирования';
  16. // через 3 секунды возвращаем кнопки текст "Копировать"
  17. window.setTimeout(function() {
  18. event.trigger.textContent = 'Копировать';
  19. }, 3000);
  20. });
скачать dle 11.3

Комментарии 1

Charlesbet
Charlesbet от 25 мая 2018 13:55
Добавить комментарий

Оставить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив