Как запретить выделение текста на 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.

No responses yet

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