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

Как сделать так чтобы текст не выделялся 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

Иногда полезно запретить выделение какого-либо текста. Например, когда этот текст располагается на элементе, выполняющем функции скроллбара.

Попробуйте выделить и скопировать этот текст.

Для основных браузеров достаточно следующих стилей:

-moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none;

IE приходится обучать отдельно:

div unselectable="on">текстdiv>

Комментарии RSS по email OK

Евгений 25 июля 2011 г., 21:11:04

Попробуйте выделить и скопировать этот текст. http://dron.by/i/f0e.png =) Достаточно начать выделять до розовой рамки

Sam 25 июля 2011 г., 21:27:38

Евгений, верно. Данный способ позволяет запретить начало выделения с некоторого элемента. Если цель не «предотвращение копипейста», этого, как правило, достаточно.

Lockal 25 июля 2011 г., 21:39:23
Этот пост смотрится забавно из RSS.
Артём 25 июля 2011 г., 21:53:01
В IOSовском Сафари интересно работает — начинает выделять текст сразу за «невыделяемым»
Максим 25 июля 2011 г., 21:59:22
Можно еще через js запретить. Особенно это актуально когда делаешь drag&drop или resize элемента 🙂
Axel Copypast 25 июля 2011 г., 22:09:52

Ну тогда нужно ещё и курсор изменять, нехорошо получается, курсор приглашает меня текст выделить, а сделать я это не могу и незнаю почему.

selfchief 26 июля 2011 г., 9:05:30

Не вижу смысла в в запрете выделять именно текст. Кому нужно копипастят не из браузера. Это лишь может пригодится для интерфейсных частей, т.к. бывает жутко бесит, что выделяется текст «кнопки» вместе с основным текстом.

Максим 26 июля 2011 г., 12:32:34

selfchief, Очень часть при drag&drop или изменении размеров какого-то элемента начинает выделяться текст страницы. Подобные способы и помогают справиться с этой проблемой. Я сам его использовал недавно.

Андрей 26 июля 2011 г., 15:01:24

Очень бы хотел обратиться к тем умельцам которые блокируют основной текст для выделения пытаясь избежать копипаст. Это помогает только от тупых мартышек которые браузер интеренетом называют, а вот люди которые пользуются различными плюшками типа нотатников, или просто привыкли читать выделяя, спасибо вам не скажут!

selfchief 26 июля 2011 г., 15:04:33
Максим 26.07.2011 12:32:34

selfchief, Очень часть при drag&drop или изменении размеров какого-то элемента начинает выделяться текст страницы. Подобные способы и помогают справиться с этой проблемой. Я сам его использовал недавно.

Использование CSS для управления выделением текста

CSS позволяет управлять, поведением и внешним видом выделенного текста на страницах HTML-документа. Это может помочь улучшить юзабилити в определенных ситуациях и добавить немного визуального чутья.

Выделить всё

Иногда бывает полезно, чтобы весь текст в элементе автоматически выделялся при нажатии на него. Это особенно удобно для текста, который копируется/вставляется полностью (фрагменты кода, одноразовые пароли, промокоды и т.д.).

Это можно сделать с помощью только простого CSS и без какого-либо JavaScript!

Выделить всё… Затем выделить часть

Хотя это работает должным образом, можно заметить кое-что неприятное: невозможно выбрать что-то отдельное, кроме всего фрагмента кода. Хорошо бы первым кликом выбрать всё, но оставить возможность кликнуть ещё раз и выбрать только часть. Это можно сделать, всё ещё, с помощью только CSS.

Во-первых, надо использовать tabindex , чтобы сделать HTML-элемент, содержащий текст, доступным для фокусировки. Это позволит CSS узнать о клике по HTML-элементу.

Это фрагмент кода

Теперь немного CSS.

code < -webkit-user-select: all; user-select: all; >code:focus < animation: select 100ms step-end forwards; >@keyframes select < to < -webkit-user-select: text; user-select: text; >>

Идея состоит в том, чтобы сначала установить для HTML-элемента CSS-свойство user-select: all , а затем, когда фокус переместится на этот элемент, переключиться на «обычный» user-select: text , чтобы текст можно было выбирать по частям. Выбор времени переключения – дело непростое. Если сделать переключение сразу после перемещения фокуса на элемент, то от user-select: all не будет никакого эффекта, т.к. оно успеет сменить значение на text . Поможет решить проблему animation .

CSS-свойство user-select можно анимировать. Оно дискретно анимированное, это означает, что нет постепенной интерполированной анимации, по истечении указанного времени происходит немедленный переход от одного состояния к другому. Поэтому, можно использовать animation , чтобы отложить изменение поведения выделения текста до 100 миллисекунд после передачи фокуса HTML-элементу.

Предотвращение выделения текста

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

label

Это плохая идея для основного текста, но будет полезно для элементов управления, которые можно быстро переключать или «гневно щелкать» в настольных браузерах, поскольку двойной щелчок вызывает выбор текста и подсветку его выделения – выглядеть немного странно и дико.

Проверить можно в следующей демонстрации. Обратите внимание, как переключатель слева становится подсвеченным при быстром нажатии, а переключатель справа – нет.

Этот метод также работает с виджетами раскрытия содержимого (HTML-элемент details ) или фальшивыми кнопками – например, с обработчиком кликов на нём. Правда, использование настоящего элемента предпочтительнее не только с точки зрения семантики и доступности, но и потому, что текст в такой кнопке по умолчанию не может быть выделен, а это позволяет избежать проблемы с самого начала.

Выборочное выделение текста

Невыделяемый текст можно смешивать с выделяемым текстом. Невыделяемые части просто пропускаются при выборе текста и будут пропущены при копировании/вставке выделения.

В примере ниже используется user-select: none на числовых маркерах сносок. Поэтому, когда выделенное копируется/вставляется, маркеры автоматически удаляются.

Но это работает не во всех браузерах. Safari (iOS и компьютер) и Android Chrome по-прежнему будут копировать маркеры.

Стилизация выделения

Стилизовать выделенный текст можно с помощью псевдоэлемента ::selection . Однако настройки ограничены тремя CSS-свойствами: color , background-color и text-shadow (в спецификации их больше, но всё портит поддержка свойств браузерами).

Вот пример стилизации выделенного текста в HTML-элементе

.

p::selection

Чтобы увидеть результат, выделяйте текст в примере ниже.

Немного особенностей

Есть еще одна декларация user-select: contain , которая должна ограничивать выделение текста внутри элемента, как это работает с . Однако, IE11 был последним браузером, который поддерживал это. В настоящее время значение contain не поддерживают все современные браузеры.

Тем не менее, все редактируемые элементы (такие как ) обрабатываются, как если бы они имели user-select: contain . Псевдоэлементы ::before и ::after нельзя выбрать, как если бы у них было установлено user-select: none . Изменить такое поведение не получится.

Всё вышенаписанное было про CSS, но всё-таки стоит упомянуть JavaScript в контексте выделения текста и копипасты.

Если нужен полный контроль над выделением текста, пригодится JavaScript Selection API. Если конечной целью является копирование/вставка текста, то JavaScript позволяет взаимодействовать с буфером обмена.

Как сделать, чтобы текст не выделялся

У меня есть див, на нем обработчик onclick , но на диве есть текст и он иногда выделяется. Как сделать чтобы не выделялся? Желательно через css.

Отслеживать

141 1 1 золотой знак 2 2 серебряных знака 9 9 бронзовых знаков

задан 25 июл 2012 в 14:02

2,468 22 22 золотых знака 50 50 серебряных знаков 96 96 бронзовых знаков

5 ответов 5

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

-moz-user-select: -moz-none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; 

Отслеживать

ответ дан 25 июл 2012 в 14:03

Maksym Prus Maksym Prus

2,884 14 14 серебряных знаков 19 19 бронзовых знаков

.unselectable

Отслеживать

ответ дан 25 июл 2012 в 14:04

12.3k 1 1 золотой знак 25 25 серебряных знаков 33 33 бронзовых знака

function disableSelection(target) < if (typeof target.onselectstart!="undefined") target.onselectstart=function()else if (typeof target.style.MozUserSelect!="undefined") target.style.MozUserSelect="none" else target.onmousedown=function() target.style.cursor = "default" > //Пример: //disableSelection(document.body); //disableSelection(document.getElementById("mydiv")); 

Отслеживать

ответ дан 25 июл 2012 в 14:05

25.9k 1 1 золотой знак 38 38 серебряных знаков 70 70 бронзовых знаков

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

Отслеживать

51.3k 87 87 золотых знаков 267 267 серебряных знаков 505 505 бронзовых знаков

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *