Javascript - копіювання в буфер за допомогою, ит шеф

Попередня ◈ Наступна

У цій статті розглянемо скрипт clipboard.js. який можна використовувати для організації копіювання деякого вмісту веб-сторінки в буфер обміну.

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

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

Скрипт працює в браузерах Chrome 42+, Firefox 41+, IE 9 + Opera 29+, Safari 8.

Переваги скрипта clipboard.js:

Не вимагає для своєї роботи Flash (як наприклад ZeroClipboard).
Не має залежностей, тобто не вимагає для своєї роботи наявність підключеної бібліотеки jQuery.
Має дуже маленький розмір.

Основи роботи з clipboard.js

Завантажити zip-архів, розпакувати його і скопіювати файл clipboard.min.js в необхідний каталог на сайті.

Підключити файл clipboard.min.js до необхідних сторінок на сайті.

Ініціалізувати Clipboard для необхідних елементів на сторінці, за допомогою передачі йому DOM-селектора, HTML-елемента або списку, що складається з HTML-елементів. Тобто необхідно функції-конструктору Clipboard передати елементи, при натисканні на які інформація буде копіюватися в буфер.

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

Додати атрибути data- * Ініціалізувати HTML елементам.

Розглянемо наступні варіанти:

2. Вирізати текст з іншого елемента

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

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

Додаткові можливості clipboard.js

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

події clipboard.js

Дії при копіюванні інформації в буфер можна відстежувати за допомогою подій clipboard.js. Усього доступно 2 події. Перша подія (success) відбувається після успішного копіювання, а друге (error) виникає в разі помилки (невдачі).

Вказівка джерела копіювання за допомогою функції

Clipboard.js дозволяє вказувати мету (елемент, вміст якого необхідно скопіювати або текст) не тільки за допомогою data-атрибутів, а й динамічно за допомогою функції. Це дозволяє не вносити зміни в Ваш код HTML, тобто позбавляє Вас від необхідності додавати до елементів атрибути data і id.

Розглянемо це на наступних прикладах:

1. Динамічне встановлення мети (target).

2. Динамічне встановлення тексту.

Приклади, які використовують додаткові можливості clipboard.js

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

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

2. Приклад, в якому будемо використовувати події clipboard.js для створення інтерактивності процесу копіювання в буфер.