Сделать текст невыделяемым в HTML: CSS и JavaScript

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

Если хотите предотвратить выделение текста, воспользуйтесь CSS-свойством user-select: none:

.unselectable { user-select: none; } /* Этот класс делает текст невыделяемым */

Затем добавьте этот класс нужным элементам в HTML:

<p class="unselectable">Окажитесь не в силах выделить меня!</p>

Таким образом, можно эффективно заблокировать выделение текста в подавляющем большинстве современных браузеров.

Совместимость и использование атрибута 'unselectable'

CSS-метод достаточно надежен, но некоторые старые версии браузеров, например Internet Explorer, могут не поддерживать его. В этом случае используйте атрибут unselectable со значением "on", тогда текст станет невыделяемым:

<p unselectable="on">Даже старый IE не справится со мной.</p>

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

Применение JavaScript для сложных случаев

Если при помощи CSS не удается сделать текст невыделяемым, на помощь придет JavaScript:

function makeUnselectable(element) {
  if (element.nodeType === 1) {
    element.setAttribute("unselectable", "on"); // Декларируем элемент невыделяемым
  }
  var child = element.firstChild;
  while (child) {
    makeUnselectable(child); // Применяем рекурсивно ко всем потомкам
    child = child.nextSibling;
  }
}

makeUnselectable(document.getElementById('myElement')); // Активируем на выбранном элементе

Этот скрипт просматривает все потомки выбранного элемента и присваивает им атрибут невыделяемости.

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

Текст на веб-странице, подобно отдельным разделам книги с ограниченным доступом, можно защитить от выделения так, как будто при помощи невидимых чернил:

До: ['Привет', 'мир', '**Невидимый**', 'текст']
После: ['Привет', 'мир', '🔍✨', 'текст']

А CSS-класс работает подобно знаку "вход запрещён":

.user-select-none {
  user-select: none; /* Ваш текст под охраной */
}

Подведите нужные элементы под этот класс, чтобы их текст стал невыделяемым.

Практическое применение и потенциальные трудности

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

Поддержка разными браузерами

Чтобы обеспечить работу во всех браузерах, добавьте всемирно известные префиксы -moz-user-select и -webkit-user-select к свойству user-select:

.no-select {
  -webkit-user-select: none; /* Для Safari */
  -moz-user-select: none;    /* Для Firefox */
  user-select: none;         /* Для всех остальных браузеров */
}

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

Детали при двойном клике

В некоторых интерфейсах двойной клик позволяет улучшить взаимодействие с пользователем, поэтому применение user-select: none к таким элементам способствует созданию более эстетичного интерфейса.

Указывайте авторство при использовании других скриптов

Если вы используете внешний JavaScript, не забудьте упомянуть автора. Это поможет предотвратить конфликты, связанные с авторскими правами, и исключит путаницу среди разработчиков.

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

1. user-select – CSS: Cascading Style Sheets | MDN — Глубокое погружение в свойство user-select.
2. user-select | CSS-Tricks — Принципы работы и примеры применения свойства user-select.
3. CSS user-select property — Практический контекст применения user-select.
4. How to disable text selection highlighting – Stack Overflow — Разнообразие решений для предотвращения выделения текста.
5. Can I use... Support tables for HTML5, CSS3, etc — Данные о поддержке user-select разными браузерами.