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

Запретить выделение текста (CSS)

Запретить выделение текста можно при помощи свойства CSS — user-select . Для старых браузеров необходимо подставлять префикс, у каждого браузера свой префикс.

-webkit-user-select — вебкит браузеры (Хром, Сафари);

user-select — для браузеров последних версий.

Запретить выделение текста

Но чтобы вы поняли, откуда возникает это превратное представление людей, порицающих наслаждение и восхваляющих страдания, я раскрою перед вами всю картину и разъясню, что именно говорил этот человек, открывший истину, которого я бы назвал зодчим счастливой жизни. Действительно, никто не отвергает, не презирает, не избегает наслаждений только из-за того, что это наслаждения, но лишь из-за того, что тех, кто не умеет разумно предаваться наслаждениям, постигают великие страдания. Равно как нет никого, кто возлюбил бы, предпочел и возжаждал бы само страдание только за то, что это страдание, а не потому, что иной раз возникают такие обстоятельства, когда страдания и боль приносят некое и немалое наслаждение. Если воспользоваться простейшим примером, то кто из нас стал бы заниматься какими бы то ни было тягостными физическими упражнениями, если бы это не приносило с собой некоей пользы? И кто мог бы по справедливости упрекнуть стремящегося к наслаждению, которое не несло бы с собой никаких неприятностей, или того, кто избегал бы такого страдания, которое не приносило бы с собой никакого наслаждения?

✖ ❤ Мне помогла статья 2 оценки
48098 просмотров 1 комментарий Артём Фёдоров 10 сентября 2013

Запретить выделение текста с помощью CSS

Чтобы запретить выделение текста на веб-странице с помощью CSS, можно использовать свойство `user-select` со значением `none`.

css .unselectable < -webkit-user-select: none; /* Запрещаем выделение на WebKit-браузерах (Chrome, Safari) */ -moz-user-select: none; /* Запрещаем выделение на Gecko-браузерах (Firefox) */ -ms-user-select: none; /* Запрещаем выделение на браузерах Internet Explorer/Edge */ user-select: none; /* Запрещаем выделение на остальных браузерах */ >

Чтобы применить данное свойство к определенному элементу или группе элементов, просто добавьте класс `unselectable` к этим элементам. Например:

html Этот текст невозможно выделить
 Элемент родитель также не может быть выделен
 Элементы внутри тоже не могут быть выделены

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

Как запретить выделение содержимого на вебстранице?

дык, так этот трюк защитит только от детей, кто захочет тот выделит то что надо и скопирует, или это не про защиту текста?

5 мар 2012 в 16:10
Да нет я просто делаю окна которые перетаскиваются мышкой и выделение мешает!
5 мар 2012 в 16:12

От блондинок можно, от бытых юзеров нет! Методов масса как обойти блокировки. Так что проще не морочить себе голову) ИМХО!

6 мар 2012 в 16:35

6 ответов 6

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

*[unselectable=on] < -moz-user-select: none; -o-user-select:none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; >для IE unselectable="on"

Отслеживать
ответ дан 5 мар 2012 в 16:10
1,544 13 13 серебряных знаков 27 27 бронзовых знаков
Это не запрещает выделение.
5 мар 2012 в 19:39
@exec а что же это делает?
6 фев 2017 в 18:40

.no-select

.no-select

Отслеживать
ответ дан 6 фев 2017 в 18:27
user232857 user232857

Это останавливает выделение! У меня в Drag&Drop работает так.

elem.onselectstart = function() < return false; >;

Отслеживать
ответ дан 5 мар 2012 в 16:19
Сергей Степанов Сергей Степанов
226 1 1 серебряный знак 10 10 бронзовых знаков

According to Can I use, the user-select is currently supported in all browsers except Internet Explorer 9 and earlier versions (but sadly still needs a vendor prefix).

All of the correct CSS variations are:

.noselect < -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ > Selectable text.
 Unselectable text.

Отслеживать
ответ дан 6 мар 2017 в 4:28
2,115 1 1 золотой знак 9 9 серебряных знаков 15 15 бронзовых знаков

А как сделать, чтобы value в Input нельзя было выделить? из статьи на Хабре просто сразу говориться (кроме элементов INPUT и TEXTAREA)

8 фев 2020 в 12:38

Поставьте div в position: absolute; и слоем выше всех остальных элементов. Смотрите пример

HTML

CSS

html, body < width: 100%; height: 100%; margin: 0; padding: 0; >#cover

Отслеживать
ответ дан 5 мар 2012 в 16:19
34k 1 1 золотой знак 31 31 серебряный знак 49 49 бронзовых знаков
Выделил спокойно.
5 мар 2012 в 19:39

Аха..))) И почему у меня ощущение, что знакомые вас не долюбливают за занудство? ))) В самом первом коментарии, makregistr дал исчерпывающий ответ. Просто люди предлагали возможные варианты, а не ломали головы, как на все сто процентов решить проблему.

5 мар 2012 в 20:09
Я пришол к выводу что надо всё три ответа засунить на вебстраницу одновременно и всё будет ОК:)
6 мар 2012 в 16:10
спасибо 011010101010011 за проверку вариантов!
6 мар 2012 в 16:11

@Rules, на Ваш вопрос есть ответ, просто нужно искать. Пихать что попало не нужно, читаем — [habrahabr.ru/blogs/webdev/18080/][1] [1]: habrahabr.ru/blogs/webdev/18080

Читать:

Как пользоваться пакетной печатью в автокаде

6 мар 2012 в 18:50

Человек уже давал ссылку на хабр. Их решение работает! Вот оно:

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); >

Мышь: отмена выделения, невыделяемые элементы

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице 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, то скопировать текст не составит для вас проблемы, ну а если нет, то увы.