К основному контенту

JavaScript и буфер обмена

Недавно была задача, частью которой был функционал копирования текста в буфер обмена. На просторах интернета много статей, но зацепила только одна: jQuery Copy To Clipboard. Казалось бы, зачем искать информацию для такой простой функциональности? Беда в том, что эта функция на чистом JavaScript работает только в IE, а в таких браузерах, как Chrome или Mozilla Firefox она работать не будет из соображений безопасности. Для преодоления этой преграды требуется вмешательства flash.
Начал издалека, но сейчас о главном. Для того, что бы нормально работало копирование текста в буфер обмена, я использовал библиотеку 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 этого тега будет скопировано в буфер обмена.

Комментарии

Популярные сообщения из этого блога

Прямые ссылки на файлы Google диска

В предыдущей статье я рассказал, как подключить свой JavaScript файл к блогу BLOGSPOT . Но для того, что бы их подключить нужны прямые ссылки на файл, а Google диск при предоставлении общего доступа к файлу выдает ссылку на предварительный просмотр, которая никак напрямую не ссылается на файл. Для Google диска прямая ссылка на файл - это ссылка на скачивание. Ниже описаны два способа создания ссылки на скачивание на примере файла prism.js.

События для ведения таблиц

Как и всегда, в пылу проекта внезапно родилась Z табличка. Главный нюанс был в том, что она должна была хранить пароли для авторизации на стороннем сервере. Естественно, никто не хотел хранить пароли в открытом виде, а двустороннее шифрование SAP не умеет без сторонних пакетов и надстроек. Далее, все как обычно - придумали алгоритм, сделали табличку. Дело осталось за малым - нужно шифровать пароли, которые вводит пользователь. Делать отдельную программу нет смысла, поскольку ее функционал мало чем будет отличаться от сгенерированного. Вот здесь на помощь приходят события! С их помощью можно, наверное, все. По крайней мере, я не нашел чего-либо, что нельзя сделать с данными через события.

OOP ALV GRID с HTML шапкой

В этой статье хочу постараться подробно описать и привести пример, как можно создать ALV отчет с таблицей на весь экран и с HTML шапкой вверху. Я не буду описывать начальный этап, где пишется селекционный экран или делается выборка данных. Будем считать, что основа у нас есть и нам нужно просто вывести данные. Главной изюминкой является то, что нужно вывести ALV GRID на экран без использования каких-либо дополнительных элементов на экране. Step-By-Step Шаг 1. Создание окна Создаем самое простое окно с номером 100. На него не нужно кидать никаких контейнеров. Оно нам нужно только для модулей PAI и PBO и вывода на него ALV GRID.