Как запретить выделение текста css
Запретить выделение текста мы можем с помощью CSS селектора user-select , задав ему значение none .
Есть что добавить? Зарегистрируетесь
Курсы по программированию на Хекслете
Backend-разработка
Разработка серверной части сайтов и веб-приложений
Frontend-разработка
Разработка внешнего интерфейса сайтов и веб-приложений и верстка
Создание сайтов
Разработка сайтов и веб-приложений на JS, Python, Java, PHP и Ruby on Rails
Тестирование
Ручное тестирование и автоматизированное тестирование на JS, Python, Java и PHP
Аналитика данных
Сбор, анализ и интерпретация данных на Python
Интенсивные курсы
Интенсивное обучение для продолжающих
DevOps
Автоматизация настройки локального окружения и серверов, развертывания и деплоя
Веб-разработка
Разработка, верстка и деплой сайтов и веб-приложений, трудоустройство для разработчиков
Математика для программистов
Обучение разделам математики, которые будут полезны при изучении программирования
JavaScript
Разработка сайтов и веб-приложений и автоматизированное тестирование на JS
Python
Веб-разработка, автоматическое тестирование и аналитика данных на Python
Java
Веб-разработка и автоматическое тестирование на Java
PHP
Веб-разработка и автоматическое тестирование на PHP
Ruby
Разработка сайтов и веб-приложений на Ruby on Rails
Go
Курсы по веб-разработке на языке Go
HTML
Современная верстка с помощью HTML и CSS
SQL
Проектирование базы данных, выполнение SQL-запросов и изучение реляционных СУБД
Git
Система управления версиями Git, регулярные выражения и основы командой строки
Похожие вопросы
02 ноября 2021
02 ноября 2021
02 ноября 2021
02 ноября 2021
- 8 800 100 22 47 бесплатно по РФ
- +7 495 085 28 38 бесплатно по Москве
Направления
- Курсы «Backend-разработка»
- Курсы «Frontend-разработка»
- Курсы «Создание сайтов»
- Курсы «Тестирование»
- Курсы «Аналитика данных»
- Интенсивные курсы
- Курсы DevOps
- Курсы «Веб-разработка»
- Курсы «Математика для программистов»
- Все курсы
О Хекслете
- О нас
- Карьера в Хекслете
- Хекслет Колледж
- Сведения об образовательной организации
- Лицензия № Л035-01216-73/00668844
ООО «Хекслет Рус» 432071, г. Ульяновск, пр-т Нариманова, дом 1Г, оф. 23 ОГРН 1217300010476
- Справка
- Вопросы и ответы
- Сообщество
- Дополнительно
- Условия использования
- Соглашение об обработке ПД
- Оферта
- Акции
Как запретить браузеру выделять текст
Если Вы веб-разработчик, то у вас наверняка возникала необходимость в том, чтобы запретить пользователю выделение текста. Оговоримся, что я не имею ввиду полный запрет с целью защиты текста, а запрет на выделение всевозможных подписей, надписей и т.п. где выделение мешает работе интерфейса и пользователю (чаще всего при drag&drop, или выделении текста при двойном клике). Это в первую очередь касается веб-приложений и ни в коем случае не касается информационных сайтов.
Что же мы можем сделать? До сих пор думал немногое. Но прежде чем перейти к рассмотрению нового (лично для меня) методу, рассмотрим какие возможности борьбы с выделением текста предлагают нам браузеры.
Internet Explorer
- Для элементов устанавливаем атрибут unselectable со значением on. Но тут есть один нюанс: текст блока с таким атрибутом нельзя выделить (то есть нельзя начать выделение с данного элемента, и клик по такому элементу не будет снимать выделение с текста, если такой выделен), но если он содержит другие элементы (к примеру «безобидные» SPAN, B и т.д.) то текст в них выделить можно. К тому же если выделение текста начато с блока без такого атрибута, то текст внутри блока с атрибутом unselectable так же будет выделен. В такой ситуации решение одно — ставить всем (!) элементам данный атрибут, что неудобно и не практично.
- Перехват события selectstart. Другими словами добавив элементу onselectstart=«return false» (к примеру к BODY) запрещает выделение текста внутри него. Опять же нюанс: если начать выделять текст за пределами такого блока, то текст внутри него выделяется без проблем.
FireFox (браузеры на движке gecko), Safari (браузеры на движке KHTML)
Данные браузеры имеют более совершенный механизм, запрещающий выделение текста в любом виде. Делается это через CSS свойство user-select со значение none, которое включили в CSS3. Но до того как это свойство утверждено, браузеры демократично сделали это собственной фишкой движка назвав свойство -moz-user-select и -khtml-user-select соответственно. Получается, чтобы запретить выделять текст внутри блока, достаточно написать:
-moz-user-select: none; -khtml-user-select: none; user-select: none;
И дело в шляпе.
Другие браузеры
А вот что касается других браузеров, то у них таких механизмов замечено не было. Вообще никаких. Конечно же Opera впереди планеты всей, для нее запрет выделения текста равносильно самому злостному преступлению. Но есть, есть один могильничек 🙂
Изучая вчера файл Оперы с хаками для сайтов, наткнулся на интересные строки:
document.addEventListener('mousemove',function(e)< if( e.target.getAttribute('unselectable')=='on' ) e.target.ownerDocument.defaultView.getSelection().removeAllRanges(); >,false);
Вспомним про атрибут unselectable у Internet Explorer’а, и становится ясным что в даном случае мы боремся с выделением текста. Развив идею, получилось некоторое кроссбраузерное решение:
function preventSelection(element) < var preventSelection = false; function addHandler(element, event, handler)< if (element.attachEvent) element.attachEvent('on' + event, handler); else if (element.addEventListener) element.addEventListener(event, handler, false); >function removeSelection() < if (window.getSelection) < window.getSelection().removeAllRanges(); >else if (document.selection && document.selection.clear) document.selection.clear(); > function killCtrlA(event) < var event = event || window.event; var sender = event.target || event.srcElement; if (sender.tagName.match(/INPUT|TEXTAREA/i)) return; var key = event.keyCode || event.which; if (event.ctrlKey && key == 'A'.charCodeAt(0)) // 'A'.charCodeAt(0) можно заменить на 65 < removeSelection(); if (event.preventDefault) event.preventDefault(); else event.returnValue = false; >> // не даем выделять текст мышкой addHandler(element, 'mousemove', function()< if(preventSelection) removeSelection(); >); addHandler(element, 'mousedown', function(event)< var event = event || window.event; var sender = event.target || event.srcElement; preventSelection = !sender.tagName.match(/INPUT|TEXTAREA/i); >); // борем dblclick // если вешать функцию не на событие dblclick, можно избежать // временное выделение текста в некоторых браузерах addHandler(element, 'mouseup', function()< if (preventSelection) removeSelection(); preventSelection = false; >); // борем ctrl+A // скорей всего это и не надо, к тому же есть подозрение // что в случае все же такой необходимости функцию нужно // вешать один раз и на document, а не на элемент addHandler(element, 'keydown', killCtrlA); addHandler(element, 'keyup', killCtrlA); >
Вызвав данную функцию, например:
preventSelection(document);
- Opera не дает обрабатывать событие dblclick, так что в этом браузере все равно возможно выделить текст двойным кликом.
- Ctrl+A:
- В Opera длительное (2-3 секунды) удержание данной комбинации вызывает выделение текста до ее отпускания. Причем если первым отжать клавишу А а потом Ctrl, то выделение пропадает. Иначе остается.
- Safari не обрабатывает keydown для клавиш при зажатом Ctrl. Потому выделение текста пропадает только после отпускания клавиш. Причем для этого браузера характерно поведение Opera, в плане порядка отпускания клавиш (если первым отжать Ctrl, то выделение останется).
- Safari & FireFox выделяют слово, и сразу снимают выделение. То есть присутствует эффект кратковременного выделения текста.
- Opera не дает запретить поведение по умолчанию. Она выделяет слово и вызывает контекстное меню.
Отключение выделения текста, вырезания, копирования и щелчка правой кнопкой мыши на странице с помощью jQuery и JavaScript
В этом посте мы обсудим, как остановить кражу контента с вашего веб-сайта, просто отключив выделение текста, вырезание, копирование и щелчок правой кнопкой мыши с помощью мыши и клавиатуры. Мы также расскажем, как можно зашифровать HTML, чтобы исходный код был доступен для чтения только браузерам.
1. Отключить выделение текста с помощью JavaScript/jQuery
Вы можете использовать следующий код, чтобы предотвратить выделение текста (и, следовательно, копирование-вырезание) внутри тега body или div. Он в основном переопределяет поведение браузера по умолчанию на onmousedown а также onselectstart мероприятие.
JS
Если вы хотите разрешить выделение текста, но при этом предотвратить копирование, используйте следующий код. Вы также можете использовать jQuery bind() чтобы добиться того же, указав события вырезания и копирования, которые запускаются, когда пользователь вырезает или копирует текст.
JS
jQuery
$ ( document ) . ready ( function ( ) < $ ( 'body' ) . bind ( 'cut copy' , function ( e ) < e . preventDefault ( ) ;
2. Отключить выделение текста с помощью CSS
The user-select Свойство указывает, где пользователи могут выбирать текст внутри элемента. Если установлено значение none, выбор не начинается с этого элемента. Вы можете использовать это свойство и применить его к тег, чтобы предотвратить выделение текста.
CSS
/* Предотвратить выделение текста
элемент во всех основных браузерах */
— youbkit — touch — callout : none ; /* Сафари для iOS */
— youbkit — user — select : none ; /* Chrome 6.0+, Safari 3.1+, Edge и Opera 15+ */
— moz — user — select : none ; /* Fire Fox */
— ms — user — select : none ; /* IE 10+ и Edge */
user — select : none ; /* Версия без префикса,
в настоящее время поддерживается Chrome и Opera */Вместо того, чтобы применять эти свойства ко всему телу, вы можете переместить их в класс и применить к элементам, выбор которых вы хотите отключить.
3. Отключить правый клик:
Вы можете использовать следующий код, чтобы предотвратить щелчок правой кнопкой мыши на любой странице. Идея состоит в том, чтобы захватить onContextMenu событие и вернуть false в обработчике события. Это заблокирует любой доступ к контекстному меню с помощью щелчка правой кнопкой мыши, а также с клавиатуры.
JS
document . oncontextmenu = new Function ( «return false;» ) ;
jQuery
$ ( document ) . ready ( function ( ) < $ ( "body" ) . on ( "contextmenu" , function ( e ) < return false ;
4. Шифрование HTML:
Все вышеупомянутые методы будут работать нормально, но ваш исходный код HTML по-прежнему уязвим. Вы можете предотвратить кражу исходного кода другими, используя это Инструмент для шифрования HTML.
Шифрование HTML преобразует содержимое вашей веб-страницы в непростой для понимания формат. Это может в значительной степени защитить ваш код от кражи другими. Единственное ограничение заключается в том, что вы увидите свою страницу только в браузерах с поддержкой JavaScript.
Это все об отключении выделения текста, вырезании, копировании и щелчке правой кнопкой мыши на странице.
Оценить этот пост
Средний рейтинг 4.32 /5. Подсчет голосов: 41
Голосов пока нет! Будьте первым, кто оценит этот пост.
Сожалеем, что этот пост не оказался для вас полезным!
Расскажите, как мы можем улучшить этот пост?
Мышь: отмена выделения, невыделяемые элементы
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице 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.
Он отменяет выделение, но у него есть особенности:
- Во-первых, невыделяемость не наследуется. То есть, невыделяемость родителя не делает невыделяемыми детей.
- Во-вторых, текст, в отличие от user-select , всё равно можно выделить, если начать выделение не на самом элементе, а рядом с ним.
Этот текст невыделяем в IE, кроме дочерних элементовЛевая часть текста в IE не выделяется при двойном клике. Правую часть ( em ) можно выделить, т.к. на ней нет атрибута unselectable .
Этот текст невыделяем в IE, кроме дочерних элементов
Итого
Для отмены выделения есть несколько способов:
- CSS-свойство user-select – везде кроме IE9- (нужен префикс, нестандарт).
- Атрибут unselectable=»on» – работает для любых IE (должен быть у всех потомков)
- Отмена действий на mousedown и selectstart :
elem.onmousedown = elem.onselectstart = function() < return false; >;Какой же способ выбирать?
Это зависит от задач и вашего удобства, а также конкретного случая. Все описанные способы работают.
Недостаток user-select – в том, что посетитель теряет возможность скопировать текст. А что, если он захочет именно это сделать?
В любом случае эти способы не предназначены для защиты от выделения-и-копирования.
Если уж хочется запретить копирование – можно использовать событие oncopy :
Уважаемый копирователь, почему-то автор хочет заставить вас покопаться в исходном коде этой страницы. Если вы знаете JS или HTML, то скопировать текст не составит для вас проблемы, ну а если нет, то увы.