Как убрать выделение текста css

Мышь: отмена выделения, невыделяемые элементы

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице 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-) 
 .. Строка после

IE9-: атрибут unselectable=«on»

В IE9- нет user-select , но есть атрибут unselectable.

Он отменяет выделение, но у него есть особенности:

1. Во-первых, невыделяемость не наследуется. То есть, невыделяемость родителя не делает невыделяемыми детей.
2. Во-вторых, текст, в отличие от user-select , всё равно можно выделить, если начать выделение не на самом элементе, а рядом с ним.

 
Этот текст невыделяем в IE, кроме дочерних элементов 

Левая часть текста в IE не выделяется при двойном клике. Правую часть ( em ) можно выделить, т.к. на ней нет атрибута unselectable .

Этот текст невыделяем в IE, кроме дочерних элементов

Итого

Для отмены выделения есть несколько способов:

1. CSS-свойство user-select – везде кроме IE9- (нужен префикс, нестандарт).
2. Атрибут unselectable=»on» – работает для любых IE (должен быть у всех потомков)
3. Отмена действий на mousedown и selectstart :

elem.onmousedown = elem.onselectstart = function() < return false; >;

Какой же способ выбирать?

Это зависит от задач и вашего удобства, а также конкретного случая. Все описанные способы работают.

Недостаток user-select – в том, что посетитель теряет возможность скопировать текст. А что, если он захочет именно это сделать?

В любом случае эти способы не предназначены для защиты от выделения-и-копирования.

Если уж хочется запретить копирование – можно использовать событие oncopy :

 
Уважаемый копирователь, почему-то автор хочет заставить вас покопаться в исходном коде этой страницы. Если вы знаете JS или HTML, то скопировать текст не составит для вас проблемы, ну а если нет, то увы.
 

Как запретить выделение текста? [дубликат]

Как я могу запретить выделение текста в определенном элемента?

Отслеживать

задан 22 авг 2016 в 8:18

user192664 user192664

22 авг 2016 в 8:20

и на js решение: learn.javascript.ru/unselectable

22 авг 2016 в 8:21

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

.unselectable < -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ >

 
Selectable text.
 
Unselectable text.
 

Больше информации здесь.

Отслеживать

ответ дан 22 авг 2016 в 8:22

user192664 user192664

А как сделать, чтобы value в Input нельзя было выделить? из статьи на Хабре просто сразу говориться (кроме элементов INPUT и TEXTAREA)

Выделение текста

Утилиты для управления возможностью выделения пользователем текста в элементе.

Используйте select-none , чтобы предотвратить выделение текста в элементе и его дочерних элементах.

Попробуйте выделить текст, чтобы увидеть ожидаемое поведение

Быстрая коричневая лиса прыгает через ленивую собаку.

div class="select-none . "> Быстрая коричневая лиса прыгает через ленивую собаку. div>

Используйте select-text , чтобы разрешить выделение текста в элементе и его дочерних элементах.

Попробуйте выделить текст, чтобы увидеть ожидаемое поведение

Быстрая коричневая лиса прыгает через ленивую собаку.

div class="select-text . "> Быстрая коричневая лиса прыгает через ленивую собаку. div>

Используйте select-all , чтобы автоматически выделять весь текст в элементе, когда пользователь щелкает мышью.

Попробуйте выделить текст, чтобы увидеть ожидаемое поведение

Быстрая коричневая лиса прыгает через ленивую собаку.

div class="select-all . "> Быстрая коричневая лиса прыгает через ленивую собаку. div>

Используйте select-auto , чтобы использовать поведение браузера по умолчанию для выбора текста. Полезно для отмены других классов, таких как select-none , в разных контрольных точках.

Попробуйте выделить текст, чтобы увидеть ожидаемое поведение

Быстрая коричневая лиса прыгает через ленивую собаку.

div class="select-auto . "> Быстрая коричневая лиса прыгает через ленивую собаку. div>

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : select-all , чтобы применять утилиту select-all только при hover .

div class="hover:select-all"> div> 

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: select-all , чтобы применить утилиту select-all только на экранах среднего размера и выше.

div class="md:select-all"> div> 

Copyright © 2023 Tailwind Labs Inc.

Как отключить выделение выделения текста в браузерах с помощью CSS

По умолчанию, когда вы выделяете текст в браузере, он обычно выделяется синим цветом. Но вы можете отключить это выделение с помощью псевдоэлемента CSS ::selection .

В настоящее время браузеры поддерживают только небольшое подмножество CSS-свойств для псевдоэлемента ::selection , например color , background-color и text-shadow . Вот пример:

::selection < color: none; background: none; >/* For Mozilla Firefox */ ::-moz-selection

Читайте также

Похожие примеры:

• Как изменить цвет выделения текста по умолчанию в браузерах с помощью CSS
• Как отключить проверку орфографии для полей ввода в HTML-формах
• Как отключить кликабельное поведение ссылки, используя только CSS