Иногда нужно запретить выделение текста в некоторых блоках - например при динамическом изменении размера, текст блока будет выделяться, что не есть красиво.
Решений тут два: используем jQuery либо CSS.
jQuery:
CSS:
Решений тут два: используем jQuery либо CSS.
jQuery:
$(".classname").attr('unselectable','on').css('MozUserSelect','none');
CSS:
.classname{ -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; }
Учитывая пожелания высказанные в комментариях, привожу пример яваскриптового отключения выделения (организованного в плагин), с явным отключением самого ивента 'onselectstart', а также содержащий весь уже выше перечисленный функционал:
jQuery.fn.extend({ disableSelection : function() { this.each(function() { this.onselectstart = function() { return false; }; this.unselectable = "on"; jQuery(this).css({ '-moz-user-select': 'none', '-khtml-user-select': 'none', '-webkit-user-select': 'none', '-o-user-select': 'none', 'user-select': 'none' }); }); }, enableSelection : function() { this.each(function() { this.onselectstart = function() {}; this.unselectable = "off"; jQuery(this).css({ '-moz-user-select': 'auto', '-khtml-user-select': 'auto', '-webkit-user-select': 'auto', '-o-user-select': 'auto', 'user-select': 'auto' }); }); } }); // Example: var selector = "td, span, div"; $(selector).disableSelection(); // disable .... $(selector).enableSelection(); // enable
Сори, но статья не полная. Это не кроссбраузерно. Проверял.
ОтветитьУдалитьПогуглив, дополнил статью. Вот что получилось:
http://tehno-team.net/javascript/25
В каких браузерах не сработало? Просто блокировать яваскриптом, это дополнительная нагрузка, особенно если на странице сложный юзер-интерфейс.
ОтветитьУдалитьЕсли это только в старых браузерах, тогда нужно смотреть, что есть приоритетнее - поддержка их или перегрузка скриптами страницы. Возможно нужно попробовать комбинировать.
А что юзать - это зависит от постановки задачи. В любом случае, спасибо за ссылку. Обязательно добавлю в статью пример из нее, как только протестирую его сам.
ОтветитьУдалитьобновил статью, добавил плагин который использует все возможные способы для отключения выделения по селектору, а также позволяет отменить это действие. Что позволит гибко управлять выделением текста на странице.
ОтветитьУдалитьjQuery вариант у меня не сработал, зато получилось с css. Спасибо за код!
ОтветитьУдалить