Недавно была задача, частью которой был функционал копирования текста в буфер обмена. На просторах интернета много статей, но зацепила только одна: jQuery Copy To Clipboard. Казалось бы, зачем искать информацию для такой простой функциональности? Беда в том, что эта функция на чистом JavaScript работает только в IE, а в таких браузерах, как Chrome или Mozilla Firefox она работать не будет из соображений безопасности. Для преодоления этой преграды требуется вмешательства flash.
Начал издалека, но сейчас о главном. Для того, что бы нормально работало копирование текста в буфер обмена, я использовал библиотеку ZeroClipboard (или вариант на github). У него не совсем понятная мне документация, но ее вполне достаточно, что бы подключить эту библиотеку и заставить работать.
В моем случае есть несколько тегов, при нажатии на которые, в буфер обмена копируется соответствующие тексты. HTML текст примерно следующий:
copy-to-clipboard - это CSS класс, который объединяет все теги, тексты которых должны быть скопированы в буфер обмена.
data-clipboard-text - имя атрибута данных, значение которого будет скопировано в буфер обмена.
Два последних шага до того, как все заработает
Собственно, все. После таких несложных манипуляций при нажатии на текст в теге с классом copy-to-clipboard, значение атрибута data-clipboard-text этого тега будет скопировано в буфер обмена.
Начал издалека, но сейчас о главном. Для того, что бы нормально работало копирование текста в буфер обмена, я использовал библиотеку ZeroClipboard (или вариант на github). У него не совсем понятная мне документация, но ее вполне достаточно, что бы подключить эту библиотеку и заставить работать.
В моем случае есть несколько тегов, при нажатии на которые, в буфер обмена копируется соответствующие тексты. HTML текст примерно следующий:
<code class="copy-to-clipboard" data-clipboard-text="Copied text"> MyText </code>
copy-to-clipboard - это CSS класс, который объединяет все теги, тексты которых должны быть скопированы в буфер обмена.
data-clipboard-text - имя атрибута данных, значение которого будет скопировано в буфер обмена.
Два последних шага до того, как все заработает
- Подключаем JavaScript библиотеку
<script type='text/javascript' src='/assets/libs/zeroclipboard/ZeroClipboard.min.js'></script>
- Указываем путь к swf файлу и говорим, что текст будет копироваться из всех элементов с классом copy-to-clipboard
var moviePath = "/ls_spam/assets/libs/zeroclipboard/ZeroClipboard.swf"; ZeroClipboard.config({swfPath: moviePath}); $(document).ready(function() { var ls_client = new ZeroClipboard($('.copy-to-clipboard')); });
Собственно, все. После таких несложных манипуляций при нажатии на текст в теге с классом copy-to-clipboard, значение атрибута data-clipboard-text этого тега будет скопировано в буфер обмена.
Комментарии
Отправить комментарий