JavaScript – Скрипт для копирования текста в буфер обмена одним кликом.

Для копирования текста мы будем использовать скрипт clipboard.js-master

Что такое clipboard.js?

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

Скачать clipboard.js-master

Преимущества скрипта.

Не требует для своей работы Flash (как например ZeroClipboard).
Не имеет зависимостей, т.е. не требует для своей работы наличие подключенной библиотеки jQuery.
Имеет очень маленький размер.

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

Основные действия при работе со скриптом clipboard.js-master (копирование в буфер) представим в виде следующих действий:

1.Скачать zip-архив, распаковать его и скопировать файл clipboard.js-master в необходимый каталог на сайте.

2.Подключить файл clipboard.min.js к необходимым страницам на сайте.

<script src="путь/до/clipboard.min.js"></script>

3.Инициализировать Clipboard для необходимых элементов на странице, посредством передачи ему DOM-селектора, HTML-элемента или списка, состоящего из HTML-элементов. Т.е. необходимо функции-конструктору Clipboard передать элементы, при нажатии на которые информация будет копироваться в буфер.

Например, инициализируем Clipboard для всех элементов на странице имеющих класс .btn-clipboard.

    <script>
    new Clipboard('.btn-clipboard');
    </script>

Добавить атрибуты data-* инициализированным HTML элементам.

Рассмотрим следующие варианты:

    
    <pre id="example1">
    ....
    </pre>
    
    <button class="btn-clipboard" data-clipboard-target="#example1">
      Скопировать в буфер обмена
    </button>
    <pre id="example2">
    ....
    </pre>
    
    <button class="btn-clipboard" data-clipboard-target="#example2">
       Скопировать в буфер обмена
    </button>
    
    <button class="btn-clipboard" data-clipboard-text="...">
      Скопировать в буфер обмена
    </button>

Пример создания кнопки

Рассмотрим пример, в котором создадим кнопку для элемента pre, при нажатии на которую контент этого элемента (pre) будет копироваться в буфер обмена.

  
<pre id="structurePage">
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title>Пример HTML5 страницы</title>
  </head>
  <body>
    Содержимое страницы...
  </body>
  </html>
  <⁄pre>
   
   
   <button type="button" data-clipboard-target="#structurePage">Скопировать код</button>
   
   <script src="clipboard.min.js"></script>
   <script>
   // Инициализируем элемент button для всех элементов button, расположенных после pre
   new Clipboard('pre+button');
   </script>
JavaScript – копирует содержимое элемента pre в буфер обмена

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

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

События clipboard.js

Действия при копировании информации в буфер можно отслеживать с помощью событий clipboard.js-master. Всего доступно 2 события. Первое событие (success) происходит после успешного копирования, а второе (error) возникает в случае ошибки (неудачи).

    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
      console.info('Действие:', e.action);
      console.info('Текст:', e.text);
      console.info('Триггер:', e.trigger);
      e.clearSelection();
    });
    clipboard.on('error', function(e) {
      console.error('Действие:', e.action);
      console.error('Триггер:', e.trigger);
    });

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

Clipboard.js позволяет указывать цель (элемент, содержимое которого необходимо скопировать или текст) не только с помощью data-атрибутов, но и динамически с помощью функции. Это позволяет не вносить изменения в Ваш код HTML, т.е. избавляет Вас от необходимости добавлять к элементам атрибуты data и id.

Рассмотрим это на следующих примерах:

1. Динамическое установление цели (target).

    // инициализируем Clipboard для всех элементов на странице, имеющих класс .btn-clipbboard
    new Clipboard('.btn-clipboard', {
      // цель определяем с помощью функции. Она должна возращать необходимый элемент (например, следующий после инициированного)
      // цель - это элемент, содержимое которого необходимо скопировать. 
      target: function(trigger) {
        return trigger.nextElementSibling;
      }
    });

Примеры с использованием дополнительных возможностей clipboard

Рассмотрим несколько примеров, в которых будем использовать дополнительные возможности, которые предлагает скрипт clipboard.

1. Пример динамического создания кнопок копирования для всех элементов pre на странице.

Рассмотрим пример, в котором с помощью кода JavaScript добавим кнопки ко всем элементам pre на странице для копирования соответствующего кода.

JavaScript

    //после загрузки страницы
    window.addEventListener('load', function() {
      // получить коллекцию элементов pre на странице
      var pre = document.getElementsByTagName('pre');
      // перебрать все элементы pre с помощью цикла for
      for (var i=0; i

HTML

    <p>HTML:</p>
    <pre>
    <p>Некоторый текст</p>
    </pre>
    <p>CSS:</p>
    <pre>
    /* CSS */
    p {
      font-size: 16px;
      font-weight: bold;
    }
    </pre>  

CSS

   .bd-clipboard {
      position: relative;
      display: none;
    }
    @media (min-width: 768px) {
      .bd-clipboard {
        display: block;
      }
    }
    .btn-clipboard {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 10;
      display: block;
      padding: 4px 8px;
      font-size: 12px;
      color: #818a91;
      cursor: pointer;
      background-color: transparent;
      border-radius: 4px;
    }
    .bd-clipboard+pre{
      margin-top:0;
    }
    .btn-clipboard:hover {
      color:#fff;
      background-color:#027de7
    }
Кнопки, добавленные ко всем HTML элементам pre на странице с помощью JavaScript
Поднесение курсора к тексту копировать

2. Пример, в котором будем использовать события clipboard для создания интерактивности процесса копирования в буфер.

Рассмотрим пример, в котором будем обрабатывать действия пользователя после того как он нажал на кнопку, выполняющей копирования информации в буфер. Если копирование информации в буфер прошло успешно, то изменим (на 3 секунды) текст кнопки на контент "Скопировано". В противном случае, если произошла ошибка при копировании, то изменим (тоже на 3 секунды) текст кнопки на "Нажмите Ctrl+C для копирования".

    // при успешном копировании
    btnClipboard.on('success', function(event) {
      // убираем выделение
      event.clearSelection();
      // изменяем текст триггера на Скопировано
      event.trigger.textContent = 'Скопировано';
      // Возращаем через 3 секунды текст триггеру на Копировать 
      window.setTimeout(function() {
        event.trigger.textContent = 'Копировать';
      }, 3000);
    });
    // если копирование завершилось с ошибкой
    btnClipboard.on('error', function(event) {
      // изменяем текст кнопки 
      event.trigger.textContent = 'Нажмите "Ctrl + C" для копирования';
      // через 3 секунды возвращаем кнопки текст "Копировать"
      window.setTimeout(function() {
        event.trigger.textContent = 'Копировать';
      }, 3000);
    });

Добавить комментарий