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

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.

OOP ALV GRID с HTML шапкой

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

Наборы в ABAP

Несколько слов о наборах. Набор - по существу это обычный range в ABAP . Выглядит он как настроечная таблица. просмотреть набор можно в транзакции GS03 . Часто требуется взять значения набора в коде программы. В этом помогут 2 функциональных модуля:  G_SET_GET_ID_FROM_NAME и  G_SET_GET_ALL_VALUES . Первый поможет узнать номер набора по его имени, а второй - сделать выборку. Ниже представлен пример использования: