Как запретить выделение текста на 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"));
Пример
Я текст, выделение которого запрещено функцией выше. Ну-ка попробуй выделить меня!

No responses yet

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