Скопировать текст в буфер обмена через jQuery

Для большей интерактивности в приложениях, которые вы создаете или просто различных сриптах иногда требуется код , который позволит пользователю одним кликом скопировать содержимое поля в буфер обмена. Вместо поля (input, textarea) может быть и просто html тег. Рассмотрим, как реализовать эту интересную задачу.

Для этого нам потребуется использовать небольшую библиотеку zclip.min.js и маленький swf файл ZeroClipboard.swf. Последний осуществляет копирование в буфер информации, которую вы передаете. Вся связка этих скриптов также требует библиотеки jquery-1.9.1.min.js. Теперь перейдет к подключению сриптов.

Как скопировать в буфер обмена код через jQuery

<div id="aave">Этот текст будет скопирован в буфер!</div>
<a id="copy" href="#" class="">Копировать</a>
<script type="text/javascript">
$(document).ready(function(){
$("#copy").zclip({
path: "ZeroClipboard.swf",
copy: function(){return $("#aave").text();}
}); });
</script>

В этом небольшом примере при клике на id copy подключается swf файл ZeroClipboard.swf и копируется любой текст в буфер, который находится в id-ке aave. В ссылках ниже вы можете как скачать уже готовый срипт по копированию текста в бфер, так и посмотреть, как он работает в живую.

Стоит отметить, что текст, который копируется может быть внутри поля textarea или input-a. Также, внутри функции copy: function() {} вы можете дописать дополнительные функции, которые будут срабатывать после копирования текста, например, чтобы сработал alert.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Введите капчу: