С помощью CSS можно запретить пользователям выбирать текст внутри элемента с помощью user-select: none. Теперь понятно, почему это может считаться «противоречивым». Я имею в виду, должен мы отключаем стандартное поведение пользователей? Вообще говоря, нет, мы не должны этого делать. Но есть ли у отключения выделения текста законные (хотя и редкие) варианты использования? Я думаю так.
В этой статье мы рассмотрим эти варианты использования и посмотрим, как мы можем использовать user-select: none для улучшения (а не для ухудшения) пользовательского опыта. Ничего не стоит и то, что user-select свойство имеет другие значения, кроме none которое можно использовать для изменения поведения выделения текста, а не для его полного отключения, и еще одно значение, которое даже принуждает выделение текста, поэтому мы также рассмотрим их.
Возможное user-select ценности
Давайте начнем с того, что пробежимся по разным user-select ценности и что они делают.
Применение user-select: none; к элементу означает, что его текстовое содержимое и вложенное текстовое содержимое нельзя выбрать ни функционально, ни визуально (т. е. ::selection не будет работать). Если бы вы сделали выборку, содержащую какое-то недоступное для выбора содержимое, недоступное для выбора содержимое было бы исключено из выбора, поэтому это довольно хорошо реализовано. И поддержка отличная.
Эти данные поддержки браузера взяты из Могу ли я использовать, который имеет более подробную информацию. Число указывает, что браузер поддерживает эту функцию в этой версии и выше.
Для ПК
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4* | 2* | 10 * | 12 * | 3.1 * |
Мобильный/Планшет
| Android Chrome | Android Firefox | Android | Система IOS Safari |
|---|---|---|---|
| 105 | 104 | 2.1 * | 3.2 * |
Неблагоприятно, user-select: text делает содержимое доступным для выбора. Вы бы использовали это значение для перезаписи user-select: none.
user-select: contain это интересно. Его применение означает, что если выделение начинается внутри элемента, то оно должно заканчиваться и в нем, содержа его. Это странно не применяется, когда начинается выбор до элемент, однако, вероятно, поэтому ни один браузер в настоящее время не поддерживает его. (Internet Explorer и более ранние версии Microsoft Edge ранее поддерживали его под видом user-select: element.)
Доступно user-select: all, выбор части содержимого элемента приводит к автоматическому выбору всего содержимого. Это все или ничего, что очень бескомпромиссно, но полезно в обстоятельствах, когда пользователи с большей вероятностью копируют контент в свой буфер обмена (например, делятся и встраивают ссылки, фрагменты кода и т. д.). Вместо двойного щелчка пользователям нужно будет щелкнуть один раз, чтобы содержимое автоматически выбралось.
Однако будьте осторожны, так как это не всегда та функция, о которой вы думаете. Что, если пользователи хотят только выбрать часть содержимого (например, только часть названия шрифта фрагмента кода Google Fonts или часть фрагмента кода)? Все равно лучше обращаться»скопировать в буфер обмена” используя JavaScript во многих сценариях.
Лучшее применение user-select: all заключается в обеспечении полного и точного копирования котировок.
Поведение user-select: auto (начальное значение user-select) зависит от элемента и того, как он используется. Подробнее об этом вы можете узнать в наш альманах.
Теперь давайте обратимся к изучению вариантов использования для user-select: none...
Удаление нетекста из выделения
Когда вы копируете контент с веб-страницы, скорее всего, это статья или какой-то другой тип длинного контента, верно? Вы, вероятно, не хотите, чтобы ваш выбор включал изображения, смайлики (которые иногда могут быть скопированы как текст, например «:thinkingface:») и другие элементы, которые вы могли бы ожидать найти завернутыми в <aside> элемент (например, призывы к действию в статье, реклама или что-то еще, что не является частью основного контента).
Чтобы что-то не было включено в выбор, убедитесь, что оно заключено в элемент HTML, а затем примените user-select: none к нему:
<p>lorem <span style="user-select: none">🤔</span> ipsum</p>
<aside style="user-select: none">
<h1>Heading</h1>
<p>Paragraph</p>
<a>Call to action</a>
</aside>В подобных сценариях мы не отключаем выделение, а скорее оптимизирующий Это. Также стоит упомянуть, что выбор не обязательно означает копирование — многие читатели (включая меня) любят выбирать контент по мере его чтения, чтобы помнить, где он находится (например, закладка), еще одна причина для оптимизации, а не для полного отключения.
Предотвращение случайного выбора
Применить user-select: none на ссылки, которые выглядят как кнопки (например, <a href="/ru/whatever" class="button">Click Me!</a>).
Невозможно выбрать текстовое содержимое <button> or <input type="submit"> потому что, ну зачем тебе? Однако это поведение неприменимо к ссылкам, поскольку традиционно они являются частью абзаца, который должен быть доступен для выбора.
Справедливо.
Мы могли бы утверждать, что Делать ссылки похожими на кнопки — это антипаттерн., но что угодно. Это не ломает интернет, не так ли? Этот корабль все равно отплыл, поэтому, если вы используете ссылки, которые выглядят как кнопки, они должны имитировать поведение кнопок не только для согласованности, но и для предотвращения случайного выбора пользователями контента вместо того, чтобы инициировать взаимодействие.
Я определенно склонен выбирать вещи случайно, так как я использую свой ноутбук в постели чаще, чем хочу признать. Кроме того, существует несколько медицинских состояний, которые могут повлиять на управление и координацию, превращая преднамеренный щелчок в непреднамеренное перетаскивание/выделение, поэтому существуют проблемы с доступностью, которые можно решить с помощью user-select тоже.
Взаимодействия, требующие перетаскивания (преднамеренно), конечно, тоже существуют (например, в браузерных играх), но они встречаются редко. Тем не менее, это просто показывает, что user-select на самом деле имеет довольно много вариантов использования.
Предотвращение кражи платного контента
Контент с платным доступом вызывает много ненависти, но если вы чувствуете, что вам нужно защищать свой контент, это ваш контент — никто не имеет права красть его только потому, что не считает, что должен платить за него.
Если вы действительно хотите пойти по этому пути, существует множество способов затруднить пользователям обход платного доступа (или аналогичным образом копировать защищенный авторским правом контент, такой как опубликованные работы других).
Размытие содержимого с помощью CSS:
article { filter: blur(<radius>); }Отключение сочетаний клавиш для DevTools:
document.addEventListener("keydown", function (e) {
if (e.keyCode == 123) e.preventDefault();
else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 73) e.preventDefault();
else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 74) e.preventDefault();
else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 85) e.preventDefault();
});Отключение доступа к DevTools через контекстное меню путем отключения самого контекстного меню:
document.addEventListener("contextmenu", e => e.preventDefault())И, конечно же, чтобы пользователи не могли копировать содержимое, когда им не разрешено читать его в источнике, применяя user-select: none:
<article style="user-select: none">Любые другие варианты использования?
Это три варианта использования, которые я могу придумать для предотвращения выделения текста. Несколько других пришло мне в голову, но все они казались натянутыми. А как насчет тебя? Вам приходилось отключать выделение текста на чем-либо? Я хотел бы знать!
