Бывают ситуации, когда пользователю необходимо запретить выделять текст на веб-странице или в каком-то определенном блоке, например при 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/