• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Запретить выделения текста на веб странице (Как запретить выделение текста на HTML-странице для сайта)
Запретить выделения текста на веб странице
Kosten
Пятница, 05 Апреля 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Бывают различные ситуаций, когда нам нужно сделает содержимое на сайте недоступным для выбора. Это может быть в какой то статье или описание, так сказать выборочно. Чтоб все работало, то для этого есть свойство 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;
}
Прикрепления: 7358303.png (11.4 Kb) · bedum.zip (1.4 Kb)
Страна: (RU)
Kosten
Пятница, 05 Апреля 2019 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
При проектировании сайта бывают ситуации, когда выбор текста нежелателен. Это может относиться не ко всей веб-странице, а только к определенным элементам на ней. Отключение возможности выделения и выделения текста может быть достигнуто различными способами.

Это свойство совпадает со свойством 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 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Также есть другие варианты, что можно по запрещению копировать или выделять текст на сайте.
Страна: (RU)
-SAM-
Вторник, 09 Апреля 2019 | Сообщение 4
Оффлайн
Друзья сайта
Сообщений:880
Награды: 40
Kosten, там как раз правильно подано, а здесь - нет (другим вариантом нельзя считать).
Цитата Kosten ()
user-select: none;
/* Версия без префикса, в настоящее время не поддерживается ни одним браузером */
И там расписано кроссбраузерно. Что касается скрипта, который там идёт - это уже в связке используют с css (для тех браузеров, которые css не воспринимают эти полностью, то есть старые IE, Opera). Полностью расписано здесь, где и поданы ссылки на описание этого свойства (и проверить поддерживается ли оно вашим браузером).

P.S.:




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".


Сообщение отредактировал
-SAM- - Вторник, 09 Апреля 2019, 03:31
Страна: (UA)
Kosten
Вторник, 09 Апреля 2019 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
-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 | Сообщение 6
Оффлайн
Друзья сайта
Сообщений:880
Награды: 40
Kosten, я там не про класс говорил, а про атрибут - вы его вслед за названием класса подменили были. Исправили и отлично. И как уже выше говорил - тут один вариант, просто там код более полный и с префиксами, для обеспечения кроссбраузерности (если стилей недостаточно, что старые браузеры есть и в них работоспособности добиться хотят - тогда еще и скриптом "лечат"). Вот собственно и все дела. Разбивать на несколько материалов одно и то же - считаю неправильным, подавая его частями... а описания писать - да сколько угодно можно (исходя из того, что идёт перевод с зарубежных ресурсов, что люди свои статьи пишут... просто описывают одни и те же стили и скрипт).



Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".


Сообщение отредактировал
-SAM- - Среда, 10 Апреля 2019, 01:39
Страна: (UA)
Kosten
Среда, 10 Апреля 2019 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Цитата -SAM- ()
Kosten, я там не про класс говорил, а про атрибут - вы его вслед за названием класса подменили были.

Так и понял при изменение, что ранее просмотрел.

Сам материал с зарубежного сайта css3gen.com/css3-articles где перевод нормальный, что сильно править не нужно, но все таки, что то заменяешь.
Страна: (RU)
Kosten
Вторник, 16 Апреля 2019 | Сообщение 8
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Отключить выделение текста с помощью CSS


See the Pen
Disable text
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Запретить выделения текста на веб странице (Как запретить выделение текста на HTML-странице для сайта)
  • Страница 1 из 1
  • 1
Поиск: