Копирование текста с сайта с помощью Clipboard.js

Clipboard.js – мини плагин для копирования текста с сайта в буфер обмена, который не использует flash и JQuery.

Сайт: https://clipboardjs.com/
GitHub: https://github.com/zenorocha/clipboard.js

Подключение и использование

Достаточно подключить JS-скрипт:

<script src="/clipboard.js/dist/clipboard.min.js"></script>
HTML

И связать кнопку и копируемое поле атрибутом data-clipboard-target:

<!-- Target -->
<input id="foo" value="...">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">Копировать</button>
HTML
Но больше возможностей представляет вызов библиотеки через api:
<input id="input" type="text" value="Lorem ipsum dolor sit amet">
<button id="button-copy" type="button">Копировать</button>
HTML
var clipboard = new ClipboardJS('#button-copy', {
	text: function(trigger) {
		return document.getElementById('input').value;
	}
});

clipboard.on('success', function(e){
	alert('Текст скопирован: ' + e.text);
	e.trigger.classList.add('btn-success');
	setTimeout(function(){
		e.trigger.classList.remove('btn-success');
	}, 3000);
});

clipboard.on('error', function(e){
	alert('Ошибка копирования');
});
JS

Пример:

<textarea id="input" class="form-control">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin blandit magna eu tempus ullamcorper.
Sed porta justo sed nibh elementum condimentum.
Quisque non eros sit amet elit commodo maximus eget a eros.
</textarea>

<button id="button-copy" type="button">Копировать</button>
HTML
var clipboard = new ClipboardJS('#button-copy', {
	text: function(trigger) {
		return document.getElementById('input').value;
	}
});

clipboard.on('success', function(e){
	alert('Текст скопирован: ' + e.text);
	e.trigger.classList.add('btn-success');
	setTimeout(function(){
		e.trigger.classList.remove('btn-success');
	}, 3000);
});

clipboard.on('error', function(e){
	alert('Ошибка копирования');
});
JS

Пример:

<div id="box">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	<p>Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum.</p>
	<p>Quisque non eros sit amet elit commodo maximus eget a eros.</p>
</div>

<button id="button-copy" type="button">Копировать</button>
HTML
var clipboard = new ClipboardJS('#button-copy', {
	text: function(trigger) {
		return document.getElementById('box').innerText.replace(/\n+/g,'\n');
	}
});

clipboard.on('success', function(e){
	alert('Текст скопирован: ' + e.text);
	e.trigger.classList.add('btn-success');
	setTimeout(function(){
		e.trigger.classList.remove('btn-success');
	}, 3000);
});

clipboard.on('error', function(e){
	alert('Ошибка копирования');
});
JS

Пример:

<div id="box">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	<p>Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum.</p>
	<p>Quisque non eros sit amet elit commodo maximus eget a eros.</p>
</div>

<div class="buttons">
	<button id="button-copy" type="button">Копировать выделенное</button>
</div>
HTML
var clipboard = new ClipboardJS('#button-copy', {
	text: function(trigger) {
		var select = window.getSelection();
		return select.toString();
	}
});

clipboard.on('success', function(e){
	alert('Текст скопирован: ' + e.text);
	e.trigger.classList.add('btn-success');
	setTimeout(function(){
		e.trigger.classList.remove('btn-success');
	}, 3000);
});

clipboard.on('error', function(e){
	alert('Ошибка копирования');
});
JS

Пример:

<div class="buttons">
	<button id="button-copy" type="button" data-clipboard-text="Текст в атрибуте data-clipboard-text">
		Копировать текст из атрибута
	</button>
</div>
HTML
var clipboard = new ClipboardJS('#button-copy', {
	text: function(trigger) {
		return trigger.getAttribute('data-clipboard-text');
	}
});

clipboard.on('success', function(e){
	alert('Текст скопирован: ' + e.text);
	e.trigger.classList.add('btn-success');
	setTimeout(function(){
		e.trigger.classList.remove('btn-success');
	}, 3000);
});

clipboard.on('error', function(e){
	alert('Ошибка копирования');
});
JS

Пример:

13.11.2021
222

Комментарии

, чтобы добавить комментарий.

Другие публикации

Защита текстов от копирования
Примеры защиты от копирования текста с сайта, добавление копирайта при копировании и отключение выделения текста в браузере. Методы обхода этих ограничений.
7683
+2
Как выделить фразы в тексте
Сделать информативнее страницу поиска – это выделить искомую фразу в результатах...
2923
+3
Как запретить выделение текста на сайте через CSS
Выделение текста в меню, кнопках и других элементах управления лучше запретить т.к. при нескольких кликах он выделяется...
5362
0
Обернуть выделенный текст тегами в textarea
С помощью JS-свойств selectionStart и selectionEnd можно сделать оборачивание выделенного текста тегами или BB-кодами.
3487
+5
Модальные окна на Fancybox 3
Fancybox 3 плагин галерей и модельных окон, в отличии от второй версии существенно изменилась скорость работы, дизайн и немного API, далее подробнее о вызове модальных окон.
17570
0
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
22063
+25