БлогNot. Как выделить часть документа одним кликом?

Как выделить часть документа одним кликом?

На многих сайтах есть кнопка или картинка "Скопировать в буфер обмена", позволяющая записать в системную память нужный фрагмент документа. Потом в любом редакторе текста фрагмент можно вставить комбинацией клавиш 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 просмотров]


теги: javascript ie безопасность jquery

К этой статье пока нет комментариев, Ваш будет первым