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