Как запретить выделение текста? [дубликат]
Как я могу запретить выделение текста в определенном элемента?
Отслеживать
задан 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)
Отключение выделения текста в HTML с помощью CSS
Если вам потребовалось запретить возможность выделения текста на вашем сайте, примените CSS свойство user-select: none; . Ниже представлен пример, как отключить выделение текста на всей странице:
Скопировать код
Поддержка устаревших браузеров
В старыми версиями браузеров, такими как Internet Explorer или Opera, для отключения выделения используется атрибут unselectable . Рассмотрим пример:
Скопировать код
Скопировать код
var elems = document.querySelectorAll('.no-select'); Array.prototype.forEach.call(elems, function(el) < el.setAttribute('unselectable', 'on'); >);Невозможность выделения и динамическое содержимое
Динамические элементы на странице также можно защитить от выделения посредством рекурсивной функции.
Скопировать код
function makeUnselectable(node) < if (node.nodeType == 1) < node.setAttribute("unselectable", "on"); >var child = node.firstChild; while (child) < makeUnselectable(child); child = child.nextSibling; >> // Пример использования: makeUnselectable(document.getElementById('content'));Предотвращение событий mousedown на уровне обработки событий
В случаях, когда CSS не справляется с задачей, JavaScript приходит на помощь, чтобы запретить перетаскивание элементов:
Скопировать код
document.addEventListener('mousedown', function(e) < e.preventDefault(); // Запрещает выделение или перетаскивание e.stopPropagation(); // Прекращает дальнейшее распространение события >, false);Использование jQuery упрощает управление подобными событиями:
Скопировать код
$(document).on('mousedown', function(e) < e.preventDefault(); >).on('mouseup', function() < $(this).off('mousedown'); >);Префиксы производителей и псевдо-стили выделения
Префиксы, применяемые производителями, стали стандартной практикой в современных браузерах:
Скопировать код
.no-select < -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE 10+ и Edge */ user-select: none; /* Общепризнанный формат */ >Если вы ранее стилизовали выделение с помощью ::selection или ::-moz-selection , то не забудьте соответствующим образом настроить их:
Скопировать код
.no-select::selection, .no-select::-moz-selection
Пользовательский опыт и доступность
Помните о важности пользовательского опыта и доступности при отключении выделения текста. Любые ограничения должны быть аргументированы с точки зрения UX.
Другие способы предотвращения взаимодействия
Чтобы запретить перетаскивание изображений без воздействия на выделение текста, мы предлагаем следующее решение:
Как запретить выделение текста css
Запретить выделение текста мы можем с помощью CSS селектора user-select , задав ему значение none .
Основы Frontend за 14 дней
72 урока в онлайн-тренажере
4 живых вебинара и масскодинг
Помощь наставника на весь период обучения
Есть что добавить? Зарегистрируйтесь
Курсы по программированию в Хекслете
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
- Курсы «Веб-разработка»
- Курсы «Математика для программистов»
- Все курсы
О Хекслете
- О нас
- Карьера в Хекслете
- Хекслет Колледж
ООО «Хекслет Рус» 108813, г. Москва, вн.тер.г. поселение Московский, г. Московский, ул. Солнечная, д. 3А, стр. 1, помещ. 10/3 ОГРН 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 не дает запретить поведение по умолчанию. Она выделяет слово и вызывает контекстное меню.