Запретить выделение текста средствами браузера

25 июля 2011

Иногда полезно запретить выделение какого-либо текста. Например, когда этот текст располагается на элементе, выполняющем функции скроллбара.

Пример:

Попробуйте выделить и скопировать этот текст.

Для основных браузеров достаточно следующих стилей:

-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;

IE приходится обучать отдельно:

<div unselectable="on">текст</div>

UPD: допиленное решение mihdan-а.

CSS
HTML

Комментарии RSS по email OK

№5050

Евгений 25 июля 2011 г., 21:11:04

Попробуйте выделить и скопировать этот текст. http://dron.by/i/f0e.png =) Достаточно начать выделять до розовой рамки
№5051

Sam 25 июля 2011 г., 21:27:38

Евгений, верно. Данный способ позволяет запретить начало выделения с некоторого элемента. Если цель не «предотвращение копипейста», этого, как правило, достаточно.
№5052

Lockal 25 июля 2011 г., 21:39:23

Этот пост смотрится забавно из RSS.
№5053

Артём 25 июля 2011 г., 21:53:01

В IOSовском Сафари интересно работает - начинает выделять текст сразу за "невыделяемым"
№5054

Максим 25 июля 2011 г., 21:59:22

Можно еще через js запретить. Особенно это актуально когда делаешь drag&drop или resize элемента :)
№5055

Axel Copypast 25 июля 2011 г., 22:09:52

Ну тогда нужно ещё и курсор изменять, нехорошо получается, курсор приглашает меня текст выделить, а сделать я это не могу и незнаю почему.
№5057

selfchief 26 июля 2011 г., 9:05:30

Не вижу смысла в в запрете выделять именно текст. Кому нужно копипастят не из браузера. Это лишь может пригодится для интерфейсных частей, т.к. бывает жутко бесит, что выделяется текст "кнопки" вместе с основным текстом.
№5058

Максим 26 июля 2011 г., 12:32:34

selfchief, Очень часть при drag&drop или изменении размеров какого-то элемента начинает выделяться текст страницы. Подобные способы и помогают справиться с этой проблемой. Я сам его использовал недавно.
№5060

Андрей 26 июля 2011 г., 15:01:24

Очень бы хотел обратиться к тем умельцам которые блокируют основной текст для выделения пытаясь избежать копипаст. Это помогает только от тупых мартышек которые браузер интеренетом называют, а вот люди которые пользуются различными плюшками типа нотатников, или просто привыкли читать выделяя, спасибо вам не скажут!
№5061

selfchief 26 июля 2011 г., 15:04:33

Максим 26.07.2011 12:32:34

selfchief, Очень часть при drag&drop или изменении размеров какого-то элемента начинает выделяться текст страницы. Подобные способы и помогают справиться с этой проблемой. Я сам его использовал недавно.

Перечитайте моё крайнее предложение ;)
№5063

Максим 26 июля 2011 г., 16:46:17

Понял, это я для сведенья

№5065

dzlk 28 июля 2011 г., 10:22:17

На хабре предлагают так (похожий на решение mihdan-а):

$.fn.disableSelection = function() {
    function preventDefault () {
        return false;
    }
    $(this).attr('unselectable', 'on')
           .css('-moz-user-select', 'none')
           .css('-khtml-user-select', 'none')
           .css('-o-user-select', 'none')
           .css('-msie-user-select', 'none')
           .css('-webkit-user-select', 'none')
           .css('user-select', 'none')
           .mousedown(preventDefault);
           .each(function() { 
               this.onselectstart = preventDefault;
           });
};

№5085

Lily 29 июля 2011 г., 15:26:42

Через Гугл Ридер выделяется.
№5092

Sensor 02 авг. 2011 г., 21:06:41

opera mini копирует без проблем)

<rmcreative>

Запретить выделение текста средствами браузера

Комментарии RSS по email OK

Интересное

Друзья

Разделы