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

На практике мне часто приходится применять данный функционал. Но чаще не из-за того что бы запретить выделение для копипастеров, тем более что данная фича легко обходится просто выключив на время javascript. А чаще в проектах где приходится крутить слайдеры, кастомные скролы, drag&drop. Т.к. здесь активно участвуют события нажатия и перетаскивание которые также выделяют текст на сайте… хотя это не требовалось. Поэтому я часто пользуюсь данными функциями…

jQuery.fn.extend({
    disableSelection : function() {
            this.each(function() {
                    this.onselectstart = function() { return false; };
                    this.unselectable = "on";
                    jQuery(this).css('-moz-user-select', 'none');
            });
    },
    enableSelection : function() {
            this.each(function() {
                    this.onselectstart = function() {};
                    this.unselectable = "off";
                    jQuery(this).css('-moz-user-select', 'auto');
            });
    }
});

// кроссбраузерный вызов
$(document).ready(function(){
    $('body *').disableSelection();
});

$(‘body *’) – именно такой селектор будет для этих метов кроссбраузерным, просто $(‘body’) или $(document) – не работает в Opera.

  • disableSelection – запрет выделения
  • enableSelection – возврат выделения

Ничего нового я в этой статье не открыл, а просто хотел поделится функциями с вами, т.к. до определенного момента вечно искал что-то подобное в инете.

Tags: , , ,

Пятница, Май 14th, 2010 JS Plugins, JavaScript, jQuery, Методики

15 Коментариев to Запрет выделения текста с помощью jQuery

  • Руслан:

    Спасибо, вот это действительно полезные функции!

    Вопрос: а к какому события лучше привязать это функции? Первым в мысль идет на div (допустим с каруселью) на событие hover, правильно ли это?

  • Руслан:

    еще, не могли бы вы описать какая из этих 3 строчек для какого браузера?

    this.onselectstart
    this.unselectable
    jQuery(this).css // это как я понял для хрома и лисицы

  • alex:

    Алексей, Вы молодец! Как всегда – как раз то, что надо!
    Кстати, пора бы уже завести твиттер ;)

  • Функции нужно применять для тех случаев, когда вы нажимая мышкой, что-то перетягиваете – что бы параллельно с этим не выделялся текст на сайте.

  • this.onselectstart = function() { return false; }; // IE, Chrome, Safari
    this.unselectable = "on"; // IE, Opera
    jQuery(this).css('-moz-user-select', 'none'); // FF
  • Пока только зарегистрировался в twitter, что к чему пока еще не знаю, но ссылку на этот пост там уже разместил.

    twitter.com/MarkupDeveloper

  • СУПЕР!!! Давно искал ответ на этот вопрос! ОГРОМНОЕ СПАСБО!!!

  • Эх, если б ещё научиться не разрешать стёбать картинки!

  • Может для защиты картинок как то отключить правую кнопку мышки? Вот только как? Алексей, Вы случайно не вразумите?

  • Находил в интернете несколько методик, но они увы небыли кроссбраузерными, поэтому не брал их на вооружение. Поэтому что-то конкретное посоветовать не могу.

  • Вот этот скриптик вроде как работает во всех браузерах, только вот в ie6 через панель инструментов изображения всё равно можно сохранять. Как бороться с этой панелью???

  • function clickIE() {
    if (document.all) {
    (message);
    return false;}}
    function clickNS(e) {
    if (document.layers||(document.getElementById&&!document.all)) {
    if (e.which==2) {
    (message);
    return false;}}}
    if (document.layers)
    {document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown=clickNS;}
    else{document.onmouseup=clickNS;
    document.oncontextmenu=clickIE;}
    document.oncontextmenu=new Function(“return false”)

  • спасибки за скриптик. и хорошо, что на твитере зарегались, так многим будет проще следить за обновлениями ваших статей

  • alex:

    В интернете информацию спрятать невозможно. То же самое и с картинками: запрещай, не запрещай – так или иначе все равно скачают, кому нужно будет:)

    а Твиттер это кул, осталось только в блог кнопку добавить

  • minimallist:

    Спасибо) Как раз тот случай (делаю горизонтальный скроллер), как раз то что нужно

  • Оставить сообщение

    Rotaban.ru - биржа банерной рекламы