<rmcreative>
Иногда полезно запретить выделение какого-либо текста. Например, когда этот текст располагается на элементе, выполняющем функции скроллбара.
Для основных браузеров достаточно следующих стилей:
IE приходится обучать отдельно:
Комментарии RSS по email OK
Попробуйте выделить и скопировать этот текст. http://dron.by/i/f0e.png =) Достаточно начать выделять до розовой рамки
Евгений, верно. Данный способ позволяет запретить начало выделения с некоторого элемента. Если цель не «предотвращение копипейста», этого, как правило, достаточно.
Этот пост смотрится забавно из RSS.
В IOSовском Сафари интересно работает — начинает выделять текст сразу за «невыделяемым»
Можно еще через js запретить. Особенно это актуально когда делаешь drag&drop или resize элемента 🙂
Ну тогда нужно ещё и курсор изменять, нехорошо получается, курсор приглашает меня текст выделить, а сделать я это не могу и незнаю почему.
Не вижу смысла в в запрете выделять именно текст. Кому нужно копипастят не из браузера. Это лишь может пригодится для интерфейсных частей, т.к. бывает жутко бесит, что выделяется текст «кнопки» вместе с основным текстом.
selfchief, Очень часть при drag&drop или изменении размеров какого-то элемента начинает выделяться текст страницы. Подобные способы и помогают справиться с этой проблемой. Я сам его использовал недавно.
Очень бы хотел обратиться к тем умельцам которые блокируют основной текст для выделения пытаясь избежать копипаст. Это помогает только от тупых мартышек которые браузер интеренетом называют, а вот люди которые пользуются различными плюшками типа нотатников, или просто привыкли читать выделяя, спасибо вам не скажут!
Максим 26.07.2011 12:32:34
selfchief, Очень часть при drag&drop или изменении размеров какого-то элемента начинает выделяться текст страницы. Подобные способы и помогают справиться с этой проблемой. Я сам его использовал недавно.
Как сделать текст невыделяемым на css
Многие разработчики, дабы защитить свои материалы и публикации на сайте используют различные способы защиты. Самый простой их них — это сделать так, чтобы текст на странице сайта нельзя было выделить ни при помощи мыши, ни при помощи клавиатуры. Как это можно реализовать?
Первый способ, связанный с небольшим повышением нагрузки на сайт — это запрет на уровне jаvascript. Как его обойти? Любой опытный пользователь просто отключит jаvascript в браузере. И все, после этой процедуры текст можно выделять и копировать.
Но в данной статье мы рассмотрим второй и более современный способ. Он заключается в том, чтобы сделать текст невыделяемым на css.
Итак, для этого нам не нужно подключения jаvascript скриптов и т.п., а всего лишь вставка следующих спецификаций на css:
В коде используется псевдоэлемент css ::selection, который позволяет указать стиль для выделяемого текста. Кроме стиля background можно использовать и другие, а именно: color и background-color.
Внимание! Для браузера MozillaFirefox используется псевдоэлемент ::-moz-selection.
Псевдоэлемент ::selection работае во всех современных браузерах и в Internet Explorer начиная с версии 9.0.
В коде мы указали запрет на выделение текста для всего текста. Если это нужно сделать для абзаца, то указанный выше код изменится.
Давайте рассмотрим полный код страницы с данным псевдоэлементом:
<html>
<head>
<title>Пример страницы с невыделяемым текстом</title>
<style>
p::selection <
background: transparent;
>
p::-moz-selection <
background: transparent;
>
</style>
</head>
<body>
<p>При попытке выделения этого текста визуально ничего не происходит.</p>
</body>
</html>
Но давайте рассмотрим поподробнее работу стилей css. Данная спецификация на css не запрещает выделить текст, а всего лишь позволяют сделать выделяемый фон прозрачным, что приводит к тому, что визуально кажется, что текст не выделяется.
Но многих пользователей это обескураживает. При этом опытное пользователи для отмены предполагаемого запрета, по старинке, отключают jаvascript. Но это ни к чему не приводит.
Хотя все очень просто — нужно выделить текст и нажать на предполагаемую выделенную область правой кнопкой мыши, а затем «копировать текст».
Получается, что данный способ просто обманывает пользователя. Он не защищает абсолютно ваши тексты, но благодаря спецификациям 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.
Он отменяет выделение, но у него есть особенности:
- Во-первых, невыделяемость не наследуется. То есть, невыделяемость родителя не делает невыделяемыми детей.
- Во-вторых, текст, в отличие от user-select , всё равно можно выделить, если начать выделение не на самом элементе, а рядом с ним.
Левая часть текста в IE не выделяется при двойном клике. Правую часть ( em ) можно выделить, т.к. на ней нет атрибута unselectable .
Итого
Для отмены выделения есть несколько способов:
CSS-свойство user-select – везде кроме IE9- (нужен префикс, нестандарт).
Атрибут unselectable="on" – работает для любых IE (должен быть у всех потомков)
Отмена действий на mousedown и selectstart :
Отмена выделения пост-фактум через функцию clearSelection() , описанную выше.
Какой же способ выбирать?
Это зависит от задач и вашего удобства, а также конкретного случая. Все описанные способы работают.
Недостаток user-select – в том, что посетитель теряет возможность скопировать текст. А что, если он захочет именно это сделать?
В любом случае эти способы не предназначены для защиты от выделения-и-копирования.
Если уж хочется запретить копирование – можно использовать событие oncopy :