Бывают ситуации, когда пользователю необходимо запретить выделять текст на веб-странице или в каком-то определенном блоке, например при Drag&Drop. Попробуем найти кроссбраузерное решение.
Средствами HTML и CSS
Для запрета выделения текста есть свойство user-select, которое, естественно, пока не кроссбраузерно, но у каждого из браузеров уже есть реализация данного функционала. Берем кучу вендорных префиксов и получаем следующее:
*[unselectable=on] {
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
IE, как всегда, выделился, поэтому для него существует отдельный атрибут тега unselectable:
<div unselectable="on" onselectstart="return false;">текст</div>
Если в IE начать выделять текст за рамками этого элемента, то он очень хорошо выделяется
Средствами 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>
Источник: https://www.kobzarev.com/programming/bulletproof-user-select/