» »

Как запретить выделение текста на сайте

Как запретить выделение текста на сайте

Иногда нам нужно выделить текст на сайте, который не возможно будет скопировать, что возможно сделать при помощи свойства user-select в CSS. Это свойство отвечает за выделение текста и другого элемента, который присутствует на странице. Но кроме текстовых полей, который находятся в различных формах, где их содержимое может быть выбрано независимо от того, задали или выставили под выбранного пользователем свойства CSS.

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

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

Как можно заметить, текст, который находится под классом «без выбора» будет недоступен для выбора.

HTML

Чтобы просто запретить пользователям выбирать текст элемента, используйте следующие стили CSS.
Код
<p>Этот текст стандартный, что не идет под классом.</p>
<p class="kopuravag_nelsad">Этот уже разместили под заданным вами класс, для того, чтоб его невозможно было скопировать.</p>

CSS

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

Код
.kopuravag_nelsad {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Синтаксис CSS

none - Этот текст запрещает копировать или переносить;
text - текст может быть выбран;
all - двойной щелчок по элементу выделяет весь текст внутри родительского элемента;

На момент написания этой статьи свойство CSS выбора пользователя не было частью какой-либо спецификации W3C CSS.

Демонстрация
2019-02-11 Просмотров: 438 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar