Создание невыделяемого текста в HTML: профессиональные методы

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

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

.no-select {
  user-select: none; /* Стандартное свойство */
}

Затем, присвойте этот класс HTML-элементу, который вы хотите защитить от выделения:

<span class="no-select">Попробуйте выделить меня – не выйдет!</span>

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

Нюансы: Совместимость с различными браузерами и другие аспекты

Свойство невыделяемости текста предотвратит его несанкционированное копирование, но прежде чем приступать к его использованию, стоит обдумать последствия. Запомните: с великой силой идут великие обязательства!

Работа в разных браузерах

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

.unselectable {
  -webkit-user-select: none; /* Для Safari, Chrome и Opera */
  -moz-user-select: none;    /* Для Firefox */
  -ms-user-select: none;     /* Для Internet Explorer */
  user-select: none;         /* Стандарт для остальных браузеров */
}

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

JavaScript: Поддержка старых браузеров

Для старых версий браузеров, которые порой забывают о CSS-правилах, мы можем использовать JavaScript, чтобы напомнить им о необходимости сохранения текста невыделяемым:

document.getElementById('unselectable-text').addEventListener('mousedown', function(event) {
  event.preventDefault(); // "Курсор, держись подальше от текста!"
}, false);

Интеграция с jQuery

jQuery может облегчить выполнение этой задачи и гарантировать, что даже самые упрямые элементы не будут выделяться:

$.fn.unselectable = function () {
  return this.each(function () {
    $(this).css({
      'user-select': 'none',
      '-webkit-user-select': 'none',
      '-moz-user-select': 'none',
      '-ms-user-select': 'none'
    }).on('selectstart false', function () {
      return false; // jQuery говорит: "Учтено!"
    });
  });
};

$('.unselectable').unselectable(); // jQuery позаботится об всём остальном.

Избыточная назойливость

Не следует злоупотреблять использованием класса unselectable – применяйте его только там, где он действительно нужен, чтобы избежать ситуаций, когда функция работает не так, как ожидалось:

.unselectable:not(input):not(textarea):not(button) {
  user-select: none; // Теперь элементы реагируют на ваши команды!
}

Мощное средство требует осторожного применения

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

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

Представьте текст, который нельзя выделить, как неприступную крепость:

// Класс 'text' становится невыделяемым
Добавьте CSS:

.text {
  user-select: none; /* Ваш щит */
  -webkit-user-select: none; /* Версия для Safari */
}

Это будет выглядеть следующим образом:

<До добавления CSS>
[Текстовый Замок️: "Добро пожаловать, осмотрите обстановку."]

<После добавления CSS>
[Текстовая Крепость️ защищена 🛡️: "Путь к тексту закрыт!"]

Ограничьте возможность ваших пользователей до чтения текста, запретив его выделение.

Решение специфических задач: выбор подходящего инструмента

Если после блокировки выделения текста у вас возникли проблемы с отображением элементов, учтите следующие два аспекта.

Внимание к деталям

Непременный выбор элементов для применения 'невыделяемости' может вызвать неожиданные последствия. Будьте внимательны:

.unselectable > p, .unselectable > span {
  user-select: none; // Понимайте свои элементы, прежде чем делать их невыделяемыми.
}

Смирение курсора

Даже если ваш текст защищён от выделения, нет нужды конфликтовать с курсором. Позвольте ему оставаться спокойным даже при наведении:

.no-select {
  user-select: none;
  cursor: default; // Дружелюбное поведение курсора.
}

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

1. user-select | CSS-Tricks — Подробное исследование свойства user-select с примерами использования.
2. user-select – CSS: Cascading Style Sheets | MDN — Справочник MDN с точным описанием и информацией о совместимости свойства user-select в разных браузерах.
3. CSS user-select property – W3Schools — Обучающая статья о основных принципах создания элементов, недоступных для выделения, с помощью user-select.
4. css – How to disable text selection highlighting – Stack Overflow — Обсуждение в сообществе со множеством подходов к деактивации выделения текста.
5. How to Get Smooth Anti Alias Fonts with CSS? – HTML & CSS – SitePoint Forums | Web Development & Design Community — Тем не менее, обсуждение на форуме затрагивает вопросы рендеринга текста и его выделения.