Как запретить выделение текста с помощью CSS
Чтобы запретить выделение текста с помощью CSS, воспользуемся свойством user-select ; однако оно не входит в спецификацию и не поддерживается популярными браузерами, поэтому без вендорных префиксов не обойтись:
Свойства -op-user-select и -xv-user-select для Opera Presto также не работают.
Итого: запретить с помощью CSS выделять текст можно только в Google Chrome, Mozilla Firefox, Opera Next и Safari.
How to disable text selection highlighting
For anchors that act like buttons (for example, the buttons on the sidebar of this Stack Overflow page titled Questions, Tags, and Users) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text?
I realize that this could be done with JavaScript and a little googling yielded the Mozilla-only -moz-user-select option.
Is there a standard-compliant way to accomplish this with CSS, and if not, what is the "best practice" approach?
45 Answers 45
UPDATE January, 2017:
According to Can I use, the user-select + -webkit-user-select for Safari is enough to achieve desired behavior in all major browsers.
These are all of the available correct CSS variations:
Note that user-select is in standardization process (currently in a W3C working draft). It is not guaranteed to work everywhere and there might be differences in implementation among browsers. Also, browsers can drop support for it in the future.
The values of this attribute are none , text , toggle , element , elements , all and inherit .
In most browsers, this can be achieved using proprietary variations on the CSS user-select property, originally proposed and then abandoned in CSS 3 and now proposed in CSS UI Level 4:
For Internet Explorer < 10 and Opera < 15, you will need to use the unselectable attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:
Sadly this property isn’t inherited, meaning you have to put an attribute in the start tag of every element inside the <div> . If this is a problem, you could instead use JavaScript to do this recursively for an element’s descendants:
Update 30 April 2014: This tree traversal needs to be rerun whenever a new element is added to the tree, but it seems from a comment by @Han that it is possible to avoid this by adding a mousedown event handler that sets unselectable on the target of the event. See http://jsbin.com/yagekiji/1 for details.
This still doesn’t cover all possibilities. While it is impossible to initiate selections in unselectable elements, in some browsers (Internet Explorer and Firefox, for example) it’s still impossible to prevent selections that start before and end after the unselectable element without making the whole document unselectable.
Мышь: отмена выделения, невыделяемые элементы
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/selection-range.
У кликов мыши есть неприятная особенность.
Двойной клик или нажатие с движением курсора как правило инициируют выделение текста.
Если мы хотим обрабатывать эти события сами, то такое выделение – некрасиво и неудобно. В этой главе мы рассмотрим основные способы, как делать элемент невыделяемым.
Для полноты картины, среди них будут и такие, которые применимы не только к событиям мыши.
Способ 1: отмена mousedown/selectstart
Проблема: браузер выделяет текст при движении мышью с зажатой левой кнопкой , а также при двойном клике на элемент. Даже там, где это не нужно.
Если сделать двойной клик на таком элементе, то обработчик сработает. Но побочным эффектом является выделение текста браузером.
Чтобы избежать выделения, мы должны предотвратить действие браузера по умолчанию для события selectstart в IE и mousedown в других браузерах.
Полный код элемента, который обрабатывает двойной клик без выделения:
При установке на родителя – все его потомки станут невыделяемыми:
Отмена действия браузера при mousedown/selectstart отменяет выделение при клике, но не запрещает его полностью.
Если пользователь всё же хочет выделить текстовое содержимое элемента, то он может сделать это.
Достаточно начать выделение (зажать кнопку мыши) не на самом элементе, а рядом с ним. Ведь там отмены не произойдёт, выделение начнётся, и дальше можно передвинуть мышь уже на элемент.
Способ 2: снятие выделения постфактум
Вместо предотвращения выделения, можно его снять в обработчике события, после того, как оно уже произошло.
Для этого мы используем методы работы с выделением, которые описаны в отдельной главе Выделение: Range, TextRange и Selection. Здесь нам понадобится всего лишь одна функция clearSelection , которая будет снимать выделение.
Пример со снятием выделения при двойном клике на элемент списка:
У этого подхода есть две особенности, на которые стоит обратить внимание:
- Выделение всё же производится, но тут же снимается. Это выглядит как мигание и не очень красиво.
- Выделение при помощи передвижения зажатой мыши всё ещё работает, так что посетитель имеет возможность выделить содержимое элемента.
Способ 3: свойство user-select
Существует нестандартное CSS-свойство user-select , которое делает элемент невыделяемым.
Оно когда-то планировалось в стандарте CSS3, потом от него отказались, но поддержка в браузерах уже была сделана и потому осталась.
Это свойство работает (с префиксом) везде, кроме IE9-:
IE9-: атрибут unselectable=«on»
В IE9- нет user-select , но есть атрибут unselectable.
Он отменяет выделение, но у него есть особенности:
- Во-первых, невыделяемость не наследуется. То есть, невыделяемость родителя не делает невыделяемыми детей.
- Во-вторых, текст, в отличие от user-select , всё равно можно выделить, если начать выделение не на самом элементе, а рядом с ним.
Левая часть текста в IE не выделяется при двойном клике. Правую часть ( em ) можно выделить, т.к. на ней нет атрибута unselectable .
Итого
Для отмены выделения есть несколько способов:
CSS-свойство user-select – везде кроме IE9- (нужен префикс, нестандарт).
Атрибут unselectable="on" – работает для любых IE (должен быть у всех потомков)
Отмена действий на mousedown и selectstart :
Отмена выделения пост-фактум через функцию clearSelection() , описанную выше.
Какой же способ выбирать?
Это зависит от задач и вашего удобства, а также конкретного случая. Все описанные способы работают.
Недостаток user-select – в том, что посетитель теряет возможность скопировать текст. А что, если он захочет именно это сделать?
В любом случае эти способы не предназначены для защиты от выделения-и-копирования.
Если уж хочется запретить копирование – можно использовать событие oncopy :
Как убрать выделение текста css
Создание игр на Unreal Engine 5
Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.
В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.
Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписаться
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Подписаться
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.