Блог веб-разработчика v 1.0.0
Symfony2, AngularJS, React, Gulp, PhpStorm и много других страшных слов

Как скопировать текст в буфер обмена на JS?

2 года назад
16488 просмотров
JavaScript Полезности

Clipboard.js - библиотека, позволяющая вам без особого труда делать кнопки копирования в буфер обмена на чистом JavaScript.

Зачем обычно необходимо использовать копирование в буфер обмена на сайте? Как правило это кнопка, по нажатию на которую в буфере обмена должен оказаться текст из, например, input или просто любой заданный текст.

Итак, подключаем библиотеку на нашу страничку, например через CDN (как использовать GitHub как CDN):

<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>

Затем, проще всего использовать библиотеку с помощью HTML5 атрибутов, например так:

<textarea id="textarea-example">Пример какого-то текста</textarea>
<button class="btn-clipboard" data-clipboard-target="#textarea-example">Скопировать в буфер обмена</button>
<script>
new Clipboard('.btn-clipboard'); // Не забываем инициализировать библиотеку на нашей кнопке
</script>

Получаем вот такой результат:

Вообще, данная библиотека обладает массой возможностей: можно не копировать, а вырезать текст, можно копировать текст из атрибута элемента и отлавливать события.

Поддержка браузеров: Chrome, Firefox, Opera, IE 9+

В Сафари к сожалению плагин работать не будет. Совсем не будет, по техническим причинам.

Что еще почитать