Частенько встаёт необходимость на Javascript скопировать текст. Как это сделать?
Обычно для этих целей использовали возможности Flash. Посколько у Flash была возможность взаимодействовать с буфером обмена на всех платформах, в отличие от Javascript.
Но это не удобно, то есть совершенно не удобно. Использовать дополнительный ролик на Flash, который долго грузится, тормозит и т.д.
Для того, чтобы на Javascript скопировать текст нужно использовать Clipboard.js
Это готовая библиотека на Javascript, которая в сжатом виде весит всего 3кб, доступна на CDN и поддерживает все платформы.
Использовать её до смешного просто.
- Нужно подключить скрипт с clipboard.js
- Нужно создать объект класса clipboard
- Нужно назначить элемент, текст которого будет копироваться
Рассмотрим на примере:
<script src="dist/clipboard.min.js"></script>
new Clipboard('.btn');
<button class='btn' data-clipboard-target="#foo" data-clipboard-action="copy">Copy</button>
<input type='text' id='foo' value='Text to be copied'>
В качестве параметров в конструктор класса clipboard можно передавать DOM объект, массив DOM объектов или DOM селектор.
В качестве data-clipboard-action можно указывать copy или cut, это не обязательный параметр, но можно даже вырезать текст, а не просто скопировать.
Также можно обойтись без дополнительного элемента, то есть просто указать атрибут data-clipboard-text, и копировать текст по нажатию кнопки из него.
Кроме того, Clipboard.js обладает достаточно подробной и понятной документацией, так, что разобраться в большом количестве возможных опций не составит труда.
Скачать и почитать документы можно на сайте Clipboard.js.
