Принудительное выделение блока с текстом

Принудительное выделение блока с текстом

От автора: вы когда-нибудь сталкивались с такой ситуацией, когда текст размещают в полях формы textarea или input для упрощения выделения всего блока? У таких полей формы есть свои границы выделения, т.е. можно кликнуть внутри этой границы и выделить весь текст поля. Есть CSS свойство, позволяющее делать то же самое без необходимости задействовать несемантические поля формы.

Свойство называется user-select, и работает оно так:

.force-select-all {
  user-select: all;
}

Autoprefixer добавит нужные префиксы, но если делать все руками, тогда запись должна быть такой:

.force-select-all {
  -webkit-user-select: all; /* Для браузеров на движке Blink и Firefox */
  user-select: all; /* Когда-нибудь будет хватать только этой строки */
}

Вам нужен пример?

Я нашел самый распространенный пример использования данного свойства. Ситуация из разряда «у нас есть сгенерированный на сервере код для вставки на наш сайт». Представьте код вставки Youtube или Vimeo видео:

Подходит для сайтов наподобие моего старого HTML-Ipsum, который уже давно нужно обновить.

Демо

Разберем другой пример. Шпаргалка с небольшими кусками кода, которые необходимо скопировать в буфер:

По поводу префиксов

На самом деле, Autoprefixer преобразует запись свойства к следующему виду:

.force-select-all {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

Что можно понять:

глупо использовать только префикс –webkit- для Firefox, даже если браузер с ним работает;

браузер Edge не поддерживает значение all, однако он поддерживает значение none с префиксом.

К примеру, вам не нравится принудительный выбор, вам нравятся рамки

Тут нам поможет значение contain. Значение заставляет текст вести себя так, будто бы он расположен внутри поля формы:

.select-text-like-you-would-within-a-textarea {
  /* Пока нигде не поддерживается */
  user-select: contain;
}

К сожалению, данное значение пока нигде не поддерживается. В IE/Edge есть своя версия данного значения:

.ie-version-of-contain {
  -ms-user-select: element;
}

Теперь мы знаем про три значения: none, all и contain. Также есть значение text, текст с которым выделяется по-обычному. Если вам понадобится сбросить значение, для этого есть значение auto. Данное значение возвращает элемент к нормальному состоянию (т.е. для тега p установится значение text, для textarea — contain).

Стилизация выделенного текста

Выделенный текст можно стилизовать:

::-moz-selection { background: yellow; }
::selection { background: yellow; }

Но… я бы не рекомендовал использовать эти два селектора в паре. Автоматически выделенный текст уже ведет себя немного странно, а вместе с совершенно другими стилями получается полная неразбериха. Пользователь может не понять, что творится на экране. На крайний случай можно задать ::selection на весь сайт, а не только для отдельных областей.

Классический способ через JavaScript

Вам может быть очень важна поддержка в Edge. Если вам кровь из носу нужно реализовать автоматическое выделение текста, можно сделать это через поле формы и JS. Самый базовый пример:

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

Псевдоэлементы

Не знаю, плохо это или хорошо, но с помощью user-select: text; можно выделять текст в псевдоэлементах типа ::before и ::after, которые на данный момент не обладают таким свойством ни в одном браузере. С одной стороны хорошо, что мы не можем выделить текст псевдоэлемента, так как он не разрабатывался для считывания технологиями для людей с ограниченными возможностями (псевдоэлементы не контент). С другой стороны странно видеть текст на экране и не иметь возможности его выделить. Так что неудивительно, что браузеры находят обходные пути.

Мобильные устройства

На iOS есть еще один способ:

.prevent-touch-callout {
  -webkit-touch-callout: none;
}

Не совсем выделение текста, но если предотвратить выделение текста, вы отключите любые взаимодействия с элементом. С MDN: «На iPhone OS при нажатии и удержании пальца на элементе в браузере Safari появляется всплывающая выноска с информацией. Данное свойство позволяет отключить эту выноску.»

Принудительное копирование?

Можно ли включить принудительное копирование текста в буфер обмена? Можно. Раньше был способ на Flash. Однако все мы знаем, что Flash уже мертв. Chrome объявил об очередном гвозде в крышке гроба данной технологии. В IE 10 появилась поддержка execCommand, и, кажется, эта технология будет и в других браузерах. Вытянул демо из статьи Мэтта Гонта с Google:

Демо работает в браузерах на движке Blink, Firefox и Edge… круто.

Редакция: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree