Бывают различные ситуаций, когда нам нужно сделает содержимое на сайте недоступным для выбора. Это может быть в какой то статье или описание, так сказать выборочно. Чтоб все работало, то для этого есть свойство user-select, которое может реализовать запрет для выделение текста. Вам нужно просто разместить свойство под тот текст, который решите защитить от копирование.
Свойство user-select в CSS определяет, может ли пользователь выбирать текст. Это не влияет на содержимое, загруженное как Chrome, только за исключением текстовых полей.
Код
/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
/* Global values */
user-select: inherit;
user-select: initial;
user-select: unset;
/* Mozilla-specific values */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;
/* WebKit-specific values */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* Не работает в Safari; использовать только
"нет" или "текст", иначе это будет
разрешить ввод в <html> контейнер */
/* Специфичные для Microsoft ценности */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
Пример:
HTML
Код
<p>Вы можете скопировать этот текст.</p>
<p class="unselectable">Вы не сможете скопировать и перенести этот текст</p>
CSS
Код
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
Также еще рассмотрим один вариант:
HTML
Код
<p>Здесь вы можете скопировать и перенести текст</p>
<p class="vecgabunsa_neledecladon">А здесь вам не как не скопировать текст, так как он защищен от воровства.</p>
CSS
Код
.vecgabunsa_neledecladon {
user-select: none;
}
user-select: none - здесь указываем, что текст не может быть выделен.
Демонстрация
Запрет выделения текста на веб-странице
Есть разные вариаций и безусловно ситуаций, это в тот момент, когда пользователю нужно сделать так, чтоб невозможно выдедить текст на на сайте или странице. Попробуем найти кроссбраузерное решение.
Средствами HTML и CSS
Специально есть свойство user-select, которое запрещает копировать, что пока не кроссбраузерно, но у каждого из браузеров уже есть реализация данного функционала. Если взять префиксы, то получаем следующее:
HTML
Код
<div unselectable="on" onselectstart="return false;">Здесь идет описание текста</div>
CSS
Код
*[unselectable=on] {
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}