Как запретить выделение текста на HTML-странице?

Вопрос

В моем проекте используются разные интерактивные элементы, которые являются кнопками, но сделаны на основе DIV-вов и т.п. Эти элементы выглядят не очень, когда текст в них выделен (это может случиться, если пользователь, к примеру, дважды кликнет по такой кнопке - поведение по умолчанию для большинства браузеров).

Я ищу какое-нибудь универсальное решение для запрета выделения текста, желательно конечно, чтобы использовались только CSS и HTML, однако если это не возможно, то пусть тогда будет JavaScript.


Ответ №1

Почитайте этот ответ, в нём описано, какие CSS-свойства можно использовать для запрета выделения текста в современных браузерах.

Для некоторых старых версий IE и Opera, к которым не применим этот метод, может сработать атрибут unselectable:

<div id="foo" unselectable="on" class="unselectable"></div>

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

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}
// Использование:
makeUnselectable(document.getElementById("foo"));

Она сработает рекурсивно для всех дочерних элементов foo.


Ответ №2

Если применять JavaScript, можно воспользоваться следующей функцией:

function disableSelection(target){
    if (typeof target.onselectstart!="undefined") // для IE:
        target.onselectstart=function(){return false}
    else if (typeof target.style.MozUserSelect!="undefined") //для Firefox:
        target.style.MozUserSelect="none"
    else // для всех других (типа Оперы):
        target.onmousedown=function(){return false}
    target.style.cursor = "default"
}

Примеры использования.

Запретим выделение текста во всем документе:

disableSelection(document.body);

Или же только в DIV-е с id которого равно ‘mydiv’:

disableSelection(document.getElementById("mydiv"));
Пример
Я текст, выделение которого запрещено функцией выше. Ну-ка попробуй выделить меня!

8 комментария

  • Arsen:

    Здравствуйте ! если честно я выделил , только не отдельно хаха . . .

  • В хроме выделяется ((

    • TIM:

      точно, выделяется если вести с зажатымЛКМ по вертикали
      По горизонтали неполучается

  • Allximik:

    Такую «защиту» можно обойти очень просто: нажать «Ctrl+U» или просто просмотреть страницу в HTML-тегах, там текст никто не защитил.

    • Денис:

      Это не есть «Защита», это костыль для дизайнерского решения — оформления кнопок посредством span’ов и div’ов.

  • Smile:

    Обойти можно но думаю многие об этом не знают, а ещё большему числу народа будет лень редактировать скопированный текст с тегами)

  • Павел:

    Выделяется только если курсор выходит за блок div… можно было бы и догадаться.

  • VadimW:

    Вообще то можно, выделить этот текст, к примеру через такое дополнение как FireBug :D

Добавить комментарий


(обязательно)