От автора: вы когда-нибудь сталкивались с такой ситуацией, когда текст размещают в полях формы textarea или input для упрощения выделения всего блока? У таких полей формы есть свои границы выделения, т.е. можно кликнуть внутри этой границы и выделить весь текст поля. Есть CSS свойство, позволяющее делать то же самое без необходимости задействовать несемантические поля формы.
Свойство называется user-select, и работает оно так:
|
1 2 3 |
.force-select-all { user-select: all; } |
Autoprefixer добавит нужные префиксы, но если делать все руками, тогда запись должна быть такой:
|
1 2 3 4 |
.force-select-all { -webkit-user-select: all; /* Для браузеров на движке Blink и Firefox */ user-select: all; /* Когда-нибудь будет хватать только этой строки */ } |
Вам нужен пример?
Я нашел самый распространенный пример использования данного свойства. Ситуация из разряда «у нас есть сгенерированный на сервере код для вставки на наш сайт». Представьте код вставки Youtube или Vimeo видео:
Подходит для сайтов наподобие моего старого HTML-Ipsum, который уже давно нужно обновить.
Демо
Разберем другой пример. Шпаргалка с небольшими кусками кода, которые необходимо скопировать в буфер:
По поводу префиксов
На самом деле, Autoprefixer преобразует запись свойства к следующему виду:
|
1 2 3 4 5 6 |
.force-select-all { -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } |
Что можно понять:
глупо использовать только префикс –webkit- для Firefox, даже если браузер с ним работает;
браузер Edge не поддерживает значение all, однако он поддерживает значение none с префиксом.
К примеру, вам не нравится принудительный выбор, вам нравятся рамки
Тут нам поможет значение contain. Значение заставляет текст вести себя так, будто бы он расположен внутри поля формы:
|
1 2 3 4 |
.select-text-like-you-would-within-a-textarea { /* Пока нигде не поддерживается */ user-select: contain; } |
К сожалению, данное значение пока нигде не поддерживается. В IE/Edge есть своя версия данного значения:
|
1 2 3 |
.ie-version-of-contain { -ms-user-select: element; } |
Теперь мы знаем про три значения: none, all и contain. Также есть значение text, текст с которым выделяется по-обычному. Если вам понадобится сбросить значение, для этого есть значение auto. Данное значение возвращает элемент к нормальному состоянию (т.е. для тега p установится значение text, для textarea — contain).
Стилизация выделенного текста
Выделенный текст можно стилизовать:
|
1 2 |
::-moz-selection { background: yellow; } ::selection { background: yellow; } |
Но… я бы не рекомендовал использовать эти два селектора в паре. Автоматически выделенный текст уже ведет себя немного странно, а вместе с совершенно другими стилями получается полная неразбериха. Пользователь может не понять, что творится на экране. На крайний случай можно задать ::selection на весь сайт, а не только для отдельных областей.
Классический способ через JavaScript
Вам может быть очень важна поддержка в Edge. Если вам кровь из носу нужно реализовать автоматическое выделение текста, можно сделать это через поле формы и JS. Самый базовый пример:
Можно было бы сделать и лучше. Можно было бы по-другому привязать обработчик события, а не прописывать его в теге. Также можно было бы учесть ситуацию, когда после автоматического выбора всего текста необходимо выделить его часть.
Псевдоэлементы
Не знаю, плохо это или хорошо, но с помощью user-select: text; можно выделять текст в псевдоэлементах типа ::before и ::after, которые на данный момент не обладают таким свойством ни в одном браузере. С одной стороны хорошо, что мы не можем выделить текст псевдоэлемента, так как он не разрабатывался для считывания технологиями для людей с ограниченными возможностями (псевдоэлементы не контент). С другой стороны странно видеть текст на экране и не иметь возможности его выделить. Так что неудивительно, что браузеры находят обходные пути.
Мобильные устройства
На iOS есть еще один способ:
|
1 2 3 |
.prevent-touch-callout { -webkit-touch-callout: none; } |
Не совсем выделение текста, но если предотвратить выделение текста, вы отключите любые взаимодействия с элементом. С MDN: «На iPhone OS при нажатии и удержании пальца на элементе в браузере Safari появляется всплывающая выноска с информацией. Данное свойство позволяет отключить эту выноску.»
Принудительное копирование?
Можно ли включить принудительное копирование текста в буфер обмена? Можно. Раньше был способ на Flash. Однако все мы знаем, что Flash уже мертв. Chrome объявил об очередном гвозде в крышке гроба данной технологии. В IE 10 появилась поддержка execCommand, и, кажется, эта технология будет и в других браузерах. Вытянул демо из статьи Мэтта Гонта с Google:
Демо работает в браузерах на движке Blink, Firefox и Edge… круто.
Редакция: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Комментарии (1)