Как выделить часть документа одним кликом?
На многих сайтах есть кнопка или картинка "Скопировать в буфер обмена", позволяющая записать в системную память нужный фрагмент документа. Потом в любом редакторе текста фрагмент можно вставить комбинацией клавиш Ctrl+V
или соответствующей кнопкой панели инструментов. Это удобно, когда нужно быстро скопировать кусочек программного кода, стихотворение или запись шахматной партии в PGN (придумайте ещё миллион примеров).
Увы, в Javascript программный доступ к системному Буферу в общем случае не разрешён из соображений безопасности - дабы не совали туда рекламу или вредоносный код. Только в Internet Explorer версий 5 и выше можно было делать копирование в Буфер Обмена простым кодом вроде
window.clipboardData.setData ("Text", text);
В других браузерах приходилось пользоваться "дыркой" в технологии Flash, разрешающей программное копирование в Буфер без подтверждения со стороны пользователя. Даже целую библиотеку ZeroClipboard создали (нужны Flash + JQuery). Правда, насколько я помню, с 10-й версии Flash и тут появились какие-то ограничения.
Меж тем, задачу можно перевернуть с головы на ноги. Зачем искать "дырки", позволяющие выполнить опасную операцию копирования в буфер, когда есть вполне безопасная операция выделения фрагмента? А для копирования пользователь самостоятельно нажмёт Ctrl+C, о чём его можно проинструктировать. Кроме того, выделение можно делать просто по щелчку на нужном элементе HTML. В этом случае на странице не нужны дополнительные кнопки или картинки, способные нарушить или усложнить дизайн.
В такой постановке можно обойтись одним JQuery (или чистым Javascript, но тогда больше писать строчек). Вот код, который у меня сработал в IE6 (!) и текущем Chrome, больше у меня ничего в тайге нет :)
Файл примера index.html
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Click-for-selecton example</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="jquery.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function () { $('.code').on('click',function () { var range, selection; if (document.createRange) { range = document.createRange(); range.selectNode(this); selection = window.getSelection(); var strsel = '' + selection; if (!strsel.length) { selection.removeAllRanges(); selection.addRange (range); } } else { //В IE ниже 9 не будет контроля выделения части текста var range = document.body.createTextRange(); range.moveToElementText(this); range.select(); } }); }); </script> <noscript> <p><small>Включите JavaScript, чтобы выделять листинги одним кликом</small></p> </noscript> <p>Просто текст. Щёлкните по листингу ниже для его выделения</p> <p class="code"> Листинг, который <br>выделяем</p> <p>Ещё текст. Комбинацией клавиш Ctrl+C можно скопировать листинг в Буфер Обмена.</p> <p class="code"> Ещё <br>листинг</p> </body></html>
Здесь выделение кликом применяется к элементам, у которых класс оформления называется .code
. На самом деле с JQuery нужно работать при кодировке документа utf-8 вместо windows-1251 (см. вторую строку листинга).
Скрипт пытается учесть ситуацию, когда в копируемом разделе уже выделена часть текста, тогда полного выделения не произойдёт (кроме IE ниже 9 версии, там не сработает, но уже и не актуально).
Файл стиля style.css для этого примера
.code { font-family: "Courier New", sans-serif; font-size: 11px; color: #006600; background-color: #FAFAFA; border: #D1D7DC; border-style: solid; border-width: 1px; }
Версия JQuery - первая попавшаяся, 1.8.1.
Файл jquery.js для этого примера (91 Кб)
30.07.2015, 14:56 [8849 просмотров]