Копировать или вырезать текст в буфер с помощью Clipboard.js

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

Преимущества данного скрипта
- не требует для своей работы Flash;
- не требует для своей работы наличие подключенной библиотеки jQuery;
- имеет очень маленький размер;
- простейший способ использования.

Что нужно? Сначала подключаем библиотеку clipboard.min.js

Далее нам нужен элемент, содержимое которого мы будет копировать

<div id="copyme">Этот текст будет скопирован в буфер обмена</div>
<button type="button" class="btn" data-clipboard-action="copy" data-clipboard-target="#copyme">Скопировать</button>

<script>
var cb = new Clipboard('.btn'); // класс кнопки
cb.on('success', function(e){
        // уведомление, можно настроить своё
	alert("Скопировано в буфер обмена");
        // выделение скопированного текста на 1,5 секунды
	window.setTimeout(function(){e.clearSelection();}, 1500);
});
</script>

Давайте разберем наш код.
Мы создали блок <div> с идентификатором id="copyme", содержимое этого блока и будет копироваться в буфер обмена. Далее мы добавили кнопку с классом class="btn" при нажатии на которую и происходит копирование. Класс этой кнопки мы указали в скрипте.

Атрибут data-clipboard-action="copy" говорит скрипту, что текст нужно скопировать (атрибут clipboard-action="cut" - вырезание, доступен только для текстовых полей).

В атрибуте data-clipboard-target="#copyme" мы указываем идентификатор элемента из которого нужно взять текст.
При клике по нашей кнопке текст будет скопирован в буфер обмена. Вот так легко и просто.

Рассмотрим вариант без кнопки. Немного изменим наш предыдущий код

<div id="copyme" class="btn" data-clipboard-action="copy" data-clipboard-target="#copyme">Копируем текст в буфер обмена без кнопки</div>

<script>
var cb = new Clipboard('.btn'); // класс кнопки
cb.on('success', function(e){
        // уведомление, можно настроить своё
	alert("Скопировано в буфер обмена");
        // выделение скопированного текста на 1,5 секунды
	window.setTimeout(function(){e.clearSelection();}, 1500);
});
</script>

Мы взяли тот же класс, что был у кнопки и присвоили его нашему элементу <div>. И в этот же <div> мы вставили атрибуты data-clipboard-action="copy" и data-clipboard-target="#copyme". Теперь для копирования текста, нам достаточно кликнуть по тексту

Еще один вариант.
Рассмотри такой случай. Копирование текста должно происходить при клике по ссылке с надписью скопировать. При этом сам текст для копирования невиден пользователю.

Практическое применение.
Допустим у Вас на сайте есть изображения, которые другие пользователи могут использовать на своем сайте. И для красоты Вы не пишете под каждым изображением код для вставки, вместо этого у Вас небольшая надпись скопировать код.

<a href="javascript:;" class="btn" data-clipboard-action="copy" data-clipboard-text="http://www.net-f.ru/img/logo.png">код для вставки</a>

<script>
var cb = new Clipboard('.btn'); // класс кнопки
cb.on('success', function(e){
        // уведомление, можно настроить своё
	alert("Скопировано в буфер обмена");
        // выделение скопированного текста на 1,5 секунды
	window.setTimeout(function(){e.clearSelection();}, 1500);
});
</script>

Текст из атрибута data-clipboard-text="" будет скопирован в буфер обмена

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

<script>
var cb = new Clipboard('.btn');
cb.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);
});
</script>

Демонстрация

Остались вопросы? Спрашивайте!

Понравилась статья? Расскажи другим :)

Опубликовано: 31 октября 2017 | Просмотров: 10140