Как убрать выделение текста 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, то скопировать текст не составит для вас проблемы, ну а если нет, то увы.
 

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

Чтобы запретить выделение текста с помощью CSS, воспользуемся свойством user-select ; однако оно не входит в спецификацию и не поддерживается популярными браузерами, поэтому без вендорных префиксов не обойтись:

-moz-user-select: none; /* Mozilla Firefox */ -ms-user-select: none; /* Internet Explorer (не поддерживается) */ -o-user-select: none; /* Opera Presto (не поддерживается) */ -webkit-user-select: none; /* Google Chrome, Opera Next, Safari */

Свойства -op-user-select и -xv-user-select для Opera Presto также не работают.

Итого: запретить с помощью CSS выделять текст можно только в Google Chrome, Mozilla Firefox, Opera Next и Safari.

Пример

Выделение текста для копирования CSS

Если скопировать выделенный текст вместе с изображением , то вместо картинки будет содержимое её атрибута alt . Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  
Если скопировать выделенный текст вместе с изображением  src="//4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s00/smail-bolshoi-palets-vverh.gif" alt="Смайлик «Большой палец вверх»" height="104" width="147" title="Отлично!"/>, то вместо картинки будет содержимое её атрибута alt. Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  
Текст будет скопирован без картинки  src="//4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s00/smail-bolshoi-palets-vverh.gif" alt="Смайлик «Большой палец вверх»" height="104" width="147" title="Отлично!"/>. Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  contenteditable --> 
contenteditable>Изменить меня с user-select: auto;
 
contenteditable>Изменить меня с user-select: all;
 
contenteditable>Изменить меня с user-select: none;

Активные псевдоэлементы ::before и ::after

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

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

• Отключить копирование изображения CSS
• Отменить переход по ссылке CSS

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

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

Отслеживать

задан 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)