При проектировании сайта бывают ситуации, когда выбор текста нежелателен. Это может относиться не ко всей веб-странице, а только к определенным элементам на ней. Отключение возможности выделения и выделения текста может быть достигнуто различными способами. Использование JavaScript, это один из методов, но иногда предпочтение отдается использованию CSS.
Вариант CSS 1
Следующий код CSS охватывает отключение выделения текста во всех основных браузерах:
HTML
Код
<p>
Выбираемый текст.
</p>
<p class="demipo_sakiles">
Не выбираемый текст.
</p>
CSS
Код
.demipo_sakiles {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer / Edge */
user-select: none;
/* Версия без префикса, в настоящее время не поддерживается ни одним браузером */
}
Почти все браузеры поддерживаются пользователем, кроме Internet Explorer 9 и более ранних версий. Однако, поскольку это не стандартная функция, могут возникнуть проблемы при реализации кода в разных браузерах
Демонстрация
Вариант CSS №2
Альтернативный подход CSS с использованием контейнера div будет использовать следующий код:
HTML
Код
<div id="zornet_ru" class="atudsam-igedsamib">это описание не скопировать</div>
CSS
Код
.atudsam-igedsamib {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none; user-select: none;
}
Поскольку это свойство не следует, так как тег придется применять для каждого элемента в контейнере div
Опция Javascript
Опция JavaScript должна быть рассмотрена, когда вышеупомянутые опции CSS не работают. Следующий код может быть использован для потомков элемента.
Код
function makeUnselectable(node) {
if (node.nodeType == 1) {
node.setAttribute("unselectable", "on");
}
var child = node.firstChild; while (child) {
makeUnselectable(child); child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));
Более простой вариант JavaScript, который можно рассмотреть:
Код
onselectstart="return false;"
Важно помнить, что ни один из этих вариантов не охватывает все возможности. Кроме того, возможность выбора отключена только внутри элементов, покрытых кодом CSS или JavaScript.
Другие элементы до и после целевого текста могут быть выделены. Этот подход не идеален для отключения выделения текста и выделения всей страницы.
Помните, что нет быстрого и простого способа реализовать эту функцию, особенно с помощью CSS, поэтому Javascript может быть наиболее приемлемым вариантом.
Средствами JavaScript (jQuery)
Суть скрипта — добавить все тот же набор CSS-правил для всех браузеров, создать атрибут unselectable и вернуть false при возникновении события onselectstart в IE.
Завернем наш скрипт в плагин, например jquery.disableSelection.js
Код
jQuery.fn.extend({
disableSelection : function() {
this.each(function() {
this.onselectstart = function() { return false; };
this.unselectable = "on";
jQuery(this).css({
'-moz-user-select': 'none',
'-o-user-select': 'none',
'-khtml-user-select': 'none',
'-webkit-user-select': 'none',
'-ms-user-select': 'none',
'user-select': 'none'
});
// Для Opera
jQuery(this).bind('mousedown', function() { return false; });
});
}
});
На веб-странице вызываем его так:
Код
<script type="text/javascript">
jQuery(function(){
jQuery('body *').disableSelection();
});
</script>
Когда нужно это подключать:
Многие веб-мастера предпочитают отключать функцию выделения и выделения текста, чтобы предотвратить несанкционированное копирование контента со своего веб-сайта. Однако нет надежного способа полностью отключить выделение текста.
Отключение выделения текста может работать для любительских скребков контента, но не мешает копированию HTML и программ автоматического копирования. Поэтому он имеет ограниченную выгоду по назначению.
