|
Запретить выделения текста на веб странице
|
|
| Kosten | Пятница, 05 Апреля 2019, 21:49 | Сообщение 1 |
| Бывают различные ситуаций, когда нам нужно сделает содержимое на сайте недоступным для выбора. Это может быть в какой то статье или описание, так сказать выборочно. Чтоб все работало, то для этого есть свойство 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;
}
| | [ RU ] |
| |
| Kosten | Пятница, 05 Апреля 2019, 21:58 | Сообщение 2 |
|
| При проектировании сайта бывают ситуации, когда выбор текста нежелателен. Это может относиться не ко всей веб-странице, а только к определенным элементам на ней. Отключение возможности выделения и выделения текста может быть достигнуто различными способами.
Это свойство совпадает со свойством 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> | | [ RU ] |
| |
| Kosten | Понедельник, 08 Апреля 2019, 23:27 | Сообщение 3 |
|
| Также есть другие варианты, что можно по запрещению копировать или выделять текст на сайте.
| | [ RU ] |
| |
| -SAM- | Вторник, 09 Апреля 2019, 02:53 | Сообщение 4 |
| Kosten, там как раз правильно подано, а здесь - нет (другим вариантом нельзя считать). Цитата Kosten (  ) user-select: none;
/* Версия без префикса, в настоящее время не поддерживается ни одним браузером */
P.S.:
Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Сообщение отредактировал
-SAM- - Вторник, 09 Апреля 2019, 03:31 | | [ UA ] |
| |
| Kosten | Вторник, 09 Апреля 2019, 15:33 | Сообщение 5 |
|
| -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 - то там всегда представлен оригинал, без измененных классов.
| | [ RU ] |
| |
| -SAM- | Среда, 10 Апреля 2019, 01:26 | Сообщение 6 |
|
| Kosten, я там не про класс говорил, а про атрибут - вы его вслед за названием класса подменили были. Исправили и отлично. И как уже выше говорил - тут один вариант, просто там код более полный и с префиксами, для обеспечения кроссбраузерности (если стилей недостаточно, что старые браузеры есть и в них работоспособности добиться хотят - тогда еще и скриптом "лечат"). Вот собственно и все дела. Разбивать на несколько материалов одно и то же - считаю неправильным, подавая его частями... а описания писать - да сколько угодно можно (исходя из того, что идёт перевод с зарубежных ресурсов, что люди свои статьи пишут... просто описывают одни и те же стили и скрипт).
Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Сообщение отредактировал
-SAM- - Среда, 10 Апреля 2019, 01:39 | | [ UA ] |
| |
| Kosten | Среда, 10 Апреля 2019, 01:40 | Сообщение 7 |
|
| Цитата -SAM- ( ) Kosten, я там не про класс говорил, а про атрибут - вы его вслед за названием класса подменили были.
Так и понял при изменение, что ранее просмотрел.
Сам материал с зарубежного сайта css3gen.com/css3-articles где перевод нормальный, что сильно править не нужно, но все таки, что то заменяешь.
| | [ RU ] |
| |
| Kosten | Вторник, 16 Апреля 2019, 20:39 | Сообщение 8 |
|
| Отключить выделение текста с помощью CSS
See the Pen
Disable text by Kocsten (@kocsten)
on CodePen.
| | [ RU ] |
| |
