Отключение выделения текста в HTML с помощью CSS

Быстрый ответ

Если вам потребовалось запретить возможность выделения текста на вашем сайте, примените CSS свойство user-select: none;. Ниже представлен пример, как отключить выделение текста на всей странице:

* {
  user-select: none; /* Искусство невозможности выделения */
}

Поддержка устаревших браузеров

В старыми версиями браузеров, такими как Internet Explorer или Opera, для отключения выделения используется атрибут unselectable. Рассмотрим пример:

<div unselectable="on" class="no-select">
  Не трогать (вспоминаем перевод из песни? Нет? Оставим это).
</div>

var elems = document.querySelectorAll('.no-select');
Array.prototype.forEach.call(elems, function(el) {
  el.setAttribute('unselectable', 'on');
});

Невозможность выделения и динамическое содержимое

Динамические элементы на странице также можно защитить от выделения посредством рекурсивной функции.

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

// Пример использования:
makeUnselectable(document.getElementById('content'));

Предотвращение событий mousedown на уровне обработки событий

В случаях, когда CSS не справляется с задачей, JavaScript приходит на помощь, чтобы запретить перетаскивание элементов:

document.addEventListener('mousedown', function(e) {
  e.preventDefault();  // Запрещает выделение или перетаскивание
  e.stopPropagation(); // Прекращает дальнейшее распространение события
}, false);

Использование jQuery упрощает управление подобными событиями:

$(document).on('mousedown', function(e) {
  e.preventDefault();
}).on('mouseup', function() {
  $(this).off('mousedown');
});

Префиксы производителей и псевдо-стили выделения

Префиксы, применяемые производителями, стали стандартной практикой в современных браузерах:

.no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE 10+ и Edge */
  user-select: none;         /* Общепризнанный формат */
}

Если вы ранее стилизовали выделение с помощью ::selection или ::-moz-selection, то не забудьте соответствующим образом настроить их:

.no-select::selection,
.no-select::-moz-selection {
  background: none;
}

Пользовательский опыт и доступность

Помните о важности пользовательского опыта и доступности при отключении выделения текста. Любые ограничения должны быть аргументированы с точки зрения UX.

Другие способы предотвращения взаимодействия

Чтобы запретить перетаскивание изображений без воздействия на выделение текста, мы предлагаем следующее решение:

img {
  pointer-events: none; /* Перетаскивание изображений запрещено */
}

В старых браузерах можно использовать прозрачное наложение:

<img src="image.jpg" draggable="false">
<div class="overlay" style="position: absolute; width: imageWidth; height: imageHeight; top: imageTop; left: imageLeft;"></div>

Визуализация

Ваш сайт – это своего рода музей:

До: 🖼️🔓 – Взаимодействие без ограничений

После добавления user-select: none;:

.exhibit { user-select: none; }

Страница таким образом преобразуется:

После: 🖼️🔒 – Только просмотр, без возможности прикоснуться

Ваши тексты защищены, как настоящие произведения искусства. 🚫👆

Точность поведения при выделении

Динамические элементы и стандарты обновления

В динамическом контенте своевременное обновление пользовательского интерфейса обеспечит плавность взаимодействия:

document.addEventListener('mousemove', function(e) {
  // Здесь укажите логику обновления интерфейса
});

Подробнее об этом расскажет наш спикер на видео

Уровни изображений с использованием z-index

При наличии слоевых элементов используйте z-index для управления их уровнями:

.overlay {
  z-index: 10; /* Закладка должна находиться выше изображения, которое она перекрывает */
}

Удаление слушателей событий

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

$(window).on('mouseup', function() {
  $(document).off('mousemove'); /* Удаляем ненужные обработчики */
});

Полезные материалы

1. user-select – CSS: Cascading Style Sheets | MDN
2. user-select | CSS-Tricks
3. CSS user-select property | W3Schools
4. How to disable text selection highlighting – Stack Overflow
5. Selection and Range | JavaScript.info
6. "user-select" | Can I use... Support tables for HTML5, CSS3, etc