Бывают различные ситуаций, когда нам нужно сделает содержимое на сайте недоступным для выбора. Это может быть в какой то статье или описание, так сказать выборочно. Чтоб все работало, то для этого есть свойство user-select, которое может реализовать запрет для выделение текста. Вам нужно просто разместить свойство под тот текст, который решите защитить от копирование.
Свойство user-select в CSS определяет, может ли пользователь выбирать текст. Это не влияет на содержимое, загруженное как Chrome, только за исключением текстовых полей.
/* 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>
<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>
При проектировании сайта бывают ситуации, когда выбор текста нежелателен. Это может относиться не ко всей веб-странице, а только к определенным элементам на ней. Отключение возможности выделения и выделения текста может быть достигнуто различными способами.
Это свойство совпадает со свойством user-select в объявлении CSS3.
Пример HTML-кода 1:
В этом примере показано использование свойств -moz-user-select и -webkit-user-select:
Код
<head> <style> .cedaqekon-tunedopas { -moz-user-select: none; -webkit-user-select: none; } </style> </head> <body> <div class="cedaqekon-tunedopas">Пользователь не может выбрать этот текст в Firefox, Google Chrome и Safari.</div> </body>
Пример HTML-кода 2:
Кросс-браузерное решение для предыдущего примера:
Код
<head> <style> .unselectable { -moz-user-select: none; -webkit-user-select: none; } </style> </head> <body> <div class="unselectable" unselectable="on"> Пользователь не может выбрать этот текст в Firefox, Google Chrome и Safari. В Internet Explorer и Opera его можно выбрать, только если выбор начинается снаружи. </div> </body>
Kosten, там как раз правильно подано, а здесь - нет (другим вариантом нельзя считать).
ЦитатаKosten ()
user-select: none; /* Версия без префикса, в настоящее время не поддерживается ни одним браузером */
И там расписано кроссбраузерно. Что касается скрипта, который там идёт - это уже в связке используют с css (для тех браузеров, которые css не воспринимают эти полностью, то есть старые IE, Opera). Полностью расписано здесь, где и поданы ссылки на описание этого свойства (и проверить поддерживается ли оно вашим браузером). P.S.:
-SAM-, вы написали и дали ссылку, а чем этот вариант отличается от того, но разве классом, но он может быть разным, ведь под любым работает, главное, чтоб аналогичен был.
HTML
Код
<p> Выбираемый текст. </p> <p class="demipo_sakiles"> Не выбираемый текст. </p>
CSS
Код
.demipo_sakiles { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer / Edge */ user-select: none; /* Версия без префикса, в настоящее время не поддерживается ни одним браузером */ }
PS - то там всегда представлен оригинал, без измененных классов.
Kosten, я там не про класс говорил, а про атрибут - вы его вслед за названием класса подменили были. Исправили и отлично. И как уже выше говорил - тут один вариант, просто там код более полный и с префиксами, для обеспечения кроссбраузерности (если стилей недостаточно, что старые браузеры есть и в них работоспособности добиться хотят - тогда еще и скриптом "лечат"). Вот собственно и все дела. Разбивать на несколько материалов одно и то же - считаю неправильным, подавая его частями... а описания писать - да сколько угодно можно (исходя из того, что идёт перевод с зарубежных ресурсов, что люди свои статьи пишут... просто описывают одни и те же стили и скрипт).
Сообщение отредактировал -SAM- - Среда, 10 Апреля 2019, 01:39
