Как сделать чтобы текст не выделялся 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-: атрибут unselectable=«on»

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

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

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

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

Итого

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

CSS-свойство user-select – везде кроме IE9- (нужен префикс, нестандарт).

Атрибут unselectable=»on» – работает для любых IE (должен быть у всех потомков)

Отмена действий на mousedown и selectstart :

Отмена выделения пост-фактум через функцию clearSelection() , описанную выше.

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

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

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

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

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

Многие разработчики, дабы защитить свои материалы и публикации на сайте используют различные способы защиты. Самый простой их них — это сделать так, чтобы текст на странице сайта нельзя было выделить ни при помощи мыши, ни при помощи клавиатуры. Как это можно реализовать?

Первый способ, связанный с небольшим повышением нагрузки на сайт — это запрет на уровне jаvascript. Как его обойти? Любой опытный пользователь просто отключит jаvascript в браузере. И все, после этой процедуры текст можно выделять и копировать.

Но в данной статье мы рассмотрим второй и более современный способ. Он заключается в том, чтобы сделать текст невыделяемым на css.

Итак, для этого нам не нужно подключения jаvascript скриптов и т.п., а всего лишь вставка следующих спецификаций на css:

В коде используется псевдоэлемент css ::selection, который позволяет указать стиль для выделяемого текста. Кроме стиля background можно использовать и другие, а именно: color и background-color.

Внимание! Для браузера MozillaFirefox используется псевдоэлемент ::-moz-selection.

Псевдоэлемент ::selection работае во всех современных браузерах и в Internet Explorer начиная с версии 9.0.

В коде мы указали запрет на выделение текста для всего текста. Если это нужно сделать для абзаца, то указанный выше код изменится.

Давайте рассмотрим полный код страницы с данным псевдоэлементом:

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

При попытке выделения этого текста визуально ничего не происходит.

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

4 ответа 4

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css javascript или задайте свой вопрос.

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459

Как запретить выделение текста CSS?

Отменить выделение можно с помощью нескольких способов.

  1. Нажмите клавишу <—>. При этом вы снимаете выделение и возвращаете курсор в начало блока (или в начало документа, если был выделен весь документ). &#8230;
  2. Щелкните кнопкой мыши. &#8230;
  3. Нажмите клавишу <Esc>, а затем клавишу <—>. &#8230;
  4. Не забывайте о команде <Shift+F5>!

Как убрать выделение в CSS?

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

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

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

Удаление выделения из части документа или из всего документа

  1. Выделите текст, из него нужно удалить выделение, или нажмите CTRL+A, чтобы выделить весь текст.
  2. Перейдите на главная и выберите стрелку рядом с цветом выделения текста.
  3. Выберите Нет цвета.

Как выделить часть текста мышкой?

Про это, конечно, знают практически все. Для выделения нужной вам части текста наведите курсор мышки на начало текста и нажмите ЛЕВУЮ кнопку мышки. Затем, НЕ отпуская кнопку, переместите курсор к концу текста, который хотите выделить. При этом текст окажется выделен каким-то цветом.

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

Выберите нажатие функциональной клавиши Esc, а следом клавиши с символом «-» для отмены выделения текста в документе Word, совершенном в расширенном режиме выделения параграфов при нажатии клавиши F8.

Как убрать выделение в фотошопе?

Чтобы снять выделение с области независимо от того, какой инструмент активизирован, воспользуйтесь командой Select > Deselect (Выделить > Снять выделение), либо нажмите комбинацию клавиш Ctrl+D, либо щелкните внутри выделенной области с помотцью любого инструмента из группы инструментов выделения (рис.

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

Либо же после выделения текста с фоном переходим на вкладку “Разметка страницы” и выбираем кнопку “Границы страниц”. В открывшемся окне на вкладке “Заливка” раскрываем стрелку с цветами и выбираем “нет цвета”. Далее жмем “Ок” и цветовое выделение с текста пропадет.

Как убрать выделение текста при копировании с сайта?

  1. В открытом документе откройте вкладку «Главная».
  2. Выделите необходимый фрагмент текста, фон которого нужно убрать. Совет! Для выделения текста всего документа используйте сочетание горячих клавиш Ctrl+A.
  3. Теперь в подкатегории «Абзац» найдите кнопку «Заливка».
  4. Нажмите на нее и выберите «Нет цвета».

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

Чтобы снять выделение текста (не удаляя текст), щелкните выделенный текст правой кнопкой мыши (Windows) или удерживая клавишу Control (Mac OS) и нажмите «Удалить».

Пять способов скрыть элемент с помощью CSS

Пять способов скрыть элемент с помощью CSS

От автора: в CSS есть много различных способов сокрытия элементов. Можно установить opacity: 0, visibility: hidden, display: none или задать сверх большие значения при абсолютном позиционировании. Вы никогда не задумывались, зачем нужно столько много способов для одного и того же действия? Все методы почти не отличаются друг от друга, а существующие различия лишь указывают на то, какой из них и в каких обстоятельствах должен применяться. В этом уроке мы вам расскажем про мелкие отличия данных методов, на которые стоит обращать внимание.

Свойство opacity

С помощью свойства opacity задается прозрачность элемента. Данное свойство не изменяет границы элемента, т.е. если задать 0, то элемент будет скрыт только визуально. Элемент все так же будет занимать свое положение и пространство, влияя на расположение других элементов макета страницы. Кроме того, невидимый элемент будет отвечать на взаимодействие с ним.

Если вы хотите скрыть с помощью opacity элементы от скрин ридеров, то у вас это не получится. Элемент и весь его контент останутся видимыми для скрин ридеров, как и все остальные элементы на странице. То есть элемент ведет себя ровно так, как если бы он был видимым.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Также стоит отметить, что свойство поддается анимации, и с его помощью можно создавать поразительные эффекты. Элемент со свойством opacity меньшим 1задает новый контекст стека.

При наведении курсора на скрытый второй блок элемент плавно меняет свое состояние с полной прозрачности до полной непрозрачности. Блоку также задано свойство cursor: pointer, показывающее, что с ним можно взаимодействовать.

Свойство visibility

Следующее в нашем списке свойство visibility. Если установить значение hidden, то элемент будет скрыт. Как в случае со свойством opacity, скрытый с помощью данного свойства элемент не виден, но не стерт из макета страницы. Отличие от первого свойства в том, что данное свойство запрещает взаимодействовать со скрытым элементом. Также элемент будет скрыт от скрин ридеров.

Данное свойство также поддается анимации, можно менять первоначальное и конечное значения. Т.е. можно плавно анимировать свойство при помощи transition.

В демо ниже показана разница между visibility и opacity:

Обратите внимание на то, что дочерние элементы тега со свойством visibility: hidden могут быть видны, если им задать свойство visibility: visible. Проведите курсором внутри блока, но не доходя до цифры. Как видите, курсор не меняет свое значение на pointer. Также если кликнуть в этой области, то ничего не произойдет.

А вот тег <p> внутри <div> захватывает все события мыши. При наведении курсора мыши на текст блок станет видимым и начнем также обрабатывать события.

Свойство display

Свойство display прячет элементы по-настоящему. Если установить элементу свойство display: none, то он не просто будет скрыт, не будет создана даже его блоковая модель. Данное свойство полностью скрывает элемент, будто его и не было. Также в таком случае с элементом нельзя никак взаимодействовать. Скрин ридерам будет не доступен контент скрытого элемента. Т.е. элемент как будто и не существовал.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Откройте вкладку CSS в демо ниже:

В коде видно, что у второго блока есть параграф, которому задано свойство display: block, но он все равно остается невидимым. В этом и есть разница между visibility: hidden и display: none. В первом случае если дочерним элементам задать свойство visibility: visible, то они станут видимыми. Во втором случае такой подход не работает. Все дочерние элементы остаются скрытыми независимо от их собственных значений свойства display.

Наведите пару раз курсор на первый блок. Событие hover выполняется? Если кликнуть на него, второй блок станет видимым. Счетчик во втором блоке должен показывать цифру, отличную от нуля. Блок скрыт от пользователя, но все еще доступен для взаимодействия через JS.

Свойство position

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

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

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