<rmcreative>

RSS

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

25 июля 2011

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

Пример:

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

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

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

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

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

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

Комментарии RSS

  1. №5050
    Евгений
    Евгений 25.07.2011, 21:11:04

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

  2. №5051
    Sam
    Sam 25.07.2011, 21:27:38

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

  3. №5052
    Lockal
    Lockal 25.07.2011, 21:39:23

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

  4. №5053
    Артём
    Артём 25.07.2011, 21:53:01

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

  5. №5054
    Максим
    Максим 25.07.2011, 21:59:22

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

  6. №5055
    Axel Copypast
    Axel Copypast 25.07.2011, 22:09:52

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

  7. №5057
    selfchief
    selfchief 26.07.2011, 9:05:30

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

  8. №5058
    Максим
    Максим 26.07.2011, 12:32:34

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

  9. №5060
    Андрей
    Андрей 26.07.2011, 15:01:24

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

  10. №5061
    selfchief
    selfchief 26.07.2011, 15:04:33

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

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

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

  11. №5063
    Максим
    Максим 26.07.2011, 16:46:17

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

  12. №5065
    dzlk
    dzlk 28.07.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;
               });
    };
  13. №5085
    Lily
    Lily 29.07.2011, 15:26:42

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

  14. №5092
    Sensor
    Sensor 02.08.2011, 21:06:41

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

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.