Начало · Справочники · Курсы · Разговоры

leechy.ru · Сайт почти придуман

Как запретить выделение элементов мышью

В некоторых примерах с кодом, тут на сайте, показаны номера строк. Заметил, что когда выделяешь код мышью и выделяешь чуть больше, чем нужно, часто выделяются и эти номера. И нужно либо стирать их после копирования-вставки, либо выделять заново. Очень неудобно.

Firefox, Safari и другие, построенные на их основе

Мозила изначально строилась с множеством дополнений к стандарту CSS. И все потому, что весь интерфейс должен быть описан с помощью XUL+CSS+JS. И среди многих нестандартных свойств есть и такое, которое отвечает за то, можно ли выделять мышью элементы или нет — -moz-user-select. У него много значений (подробно будут описаны, когда оно появиться в справочнике), но то, что нас интересует для решения задачи — none. В отличии от MSIE, значение наследуется для всех детей элемента, для которого свойство указано.

А будет ли такое свойство в стандарте?

А будет ли такое свойство в стандарте?

Это свойство, конечно без префикса -moz-, попало и в рабочей версии стандарта CSS Level 3:
http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select

Но в текущей версии модуль, где свойство описано User Interface for CSS3 был замещен новым модулем CSS3 Basic User Interface Module, где уже нет свойства user-select. И ни в каком другом модуле его тоже нет.

Подобно Мозиле, со своим префиксом, свойство user-select появилось еще и в движке KHTML/WebKit, на котором построены уже несколько браузеров — Konqueror, Safari и Chrome. Префиксы у них соответственно -khtml- (работало в Safari 2.0) и -webkit- (начиная с Safari 3.0).

Так что в итоге получается, что с помощью CSS-свойств можно запретить выделение содержимого элементов не только в эксплорере, но еще и в браузерах, построенных на базе Gecko и WebKit:

Пример 1: запрещаем выделение стилями

Этот текст не должен выделяться мышью в Firefox, Safari и Chrome

<p style="-moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none"> 
	Этот текст <b>не должен</b> выделяться мышью <i>в Firefox, Safari и Chrome</i>
</p> 
01 
02 
03 

Эксплорер

Конечно, я знал, что выделение элементов можно запретить в эксплорере. Есть специальный атрибут, который отвечает за выделение — unselectable. Значения у него либо on — значение элемента нельзя выделять, либо off (по умолчанию) выделение разрешено.

Только оказалось, что этот запрет очень странный — нельзя выделить содержимое элемента, если начать выделение в самом элементе. Если же начать выделять текст за рамками этого элемента, очень хорошо все выделяется. Так что решение частичное... примерно на 1% случаев.

Пример 2: запрещаем выделение в эксплорере

Этот текст не должен выделяться мышью в эксплорере.

<p unselectable="on"> 
	Этот текст не должен выделяться мышью в эксплорере.
</p> 
01 
02 
03 

Правда тут есть один нюанс — запрет на выделение не распространяется на дочерных элементов. Какими бы они нeбыли по типу или по значению. Поэтому, если у вас сложная структура — придется писать атрибут во всех без исключений элементов.

Пример 3: содержимое вложеных элементов можно выделить

Этот текст не должен выделяться мышью в эксплорере.

<p unselectable="on"> 
	Этот текст <b>не должен</b> выделяться мышью <i>в эксплорере</i>.
</p> 
01 
02 
03 

Для полной реализации поддержки невыделения в MSIE видимо придется написать отдельный скрипт, который, на onselectionchange будет менять содержимое selection и исключать оттуда нужные элементы. Надеюсь получится.

А как-же Opera?

Несмотря на множественое упоминание на разных сайтах о том, что есть свойство -o-user-select или что будет поддержка user-select без префикса в CSS3 (см. врезку) в Опере, к сожалению, запретить выделение текста нельзя никаким способом, кроме сложного яваскрипта. А такой нормальный яваскрипт, который будет исключать из выделения только нужные элементы у меня нет да и в сети ничего вразумительного не нашел. Поэтому видимо скрипт, который нужно написать для эксплорера должен заработать и в Опере.

Итог

В итоге, нужно для всех-всех-всех вложенных элементов прописывать атрибут unselectable="on" и еще для верхнего родителя стили -moz-user-select, -khtml-user-select и -webkit-user-select со значением none.

И подождать пока напишу нужный скрипт для Эксплорера и Оперы (или написать самому и прислать мне, спасибо).

Если Safari 2.0 и Konqueror не интересны очень, то можно пропустить -khtml-user-select. И... стили все-таки вынесите, пожалуйста, за каким-нибудь классом.

Пример 4: текст, который не выделяется в IE, Fx и Safari

Этот текст не должен выделяться мышью нигде кроме Оперы

<p style="-moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none" unselectable="on"> 
	Этот текст <b unselectable="on">не должен</b> выделяться мышью <i unselectable="on">нигде кроме Оперы</i>
</p> 
01 
02 
03