• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Запрет выделение текста на сайте с помощью CSS (Как запретить выделение содержимого на веб странице)
Запрет выделение текста на сайте с помощью CSS
Kosten
Дата: Воскресенье, 22.07.2018, 01:19 | Сообщение 1
Администраторы
Сообщений:18251
Награды: 55


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

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

Это полезно в ситуациях, когда вы хотите обеспечить более простой и более чистый способ копирования-вставки для пользователей, где не иметь их случайно текст - выберите бесполезные вещи, такие как значки или изображения. Firefox применяет тот факт, что любой текст, соответствующий этому селектору, не может быть скопирован. Могут быть некоторые случаи, когда предотвращение выбора определенных частей вашей веб-страницы может быть полезным.



Запрет выделения текста

Код
.noselect {
    -webkit-user-select: none;
    -moz-user-select: none;   
    -ms-user-select: none;
    user-select: none;
}


WebKit по-прежнему позволяет копировать текст, если вы выбираете элементы вокруг него.



Вы также можете использовать это, чтобы обеспечить, чтобы весь элемент получал выбор:

Код
.force-select {  
  -webkit-user-select: all;  /* Chrome 49+ */
  -moz-user-select: all;     /* Firefox 43+ */
  -ms-user-select: all;      /* No support yet */
  user-select: all;          /* Likely future */   
}


Вот некоторые из них:

HTML

Код
<div class="no-copy">
    <p>Здесь вы не сможете скопировать</p>
</div>

<div class="no-copy">
    <p>Но вы можете случайно скопировать меня в WebKit / Blink, но не Gecko, выбрав периоды вокруг меня.</p>
</div>

<div class="all-copy">
  <p>Один клик выбирает все это</p>
</div>


CSS

Код
.no-copy p {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */     
}

.all-copy p {  
  -webkit-user-select: all;  /* Chrome all / Safari all */
  -moz-user-select: all;     /* Firefox all */
  -ms-user-select: all;      /* IE 10+ */
  user-select: all;          /* Likely future */   
}


Демонстрация

Это те заметки, которые вам обязательно нужно запомнить:

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

Видео заметка:

Прикрепления: 5104351.jpg(29.1 Kb) · 7890296.jpg(47.9 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 22.07.2018, 05:24 | Сообщение 2
Администраторы
Сообщений:18251
Награды: 55


Аналогично по этой теме в запрете на копирование, есть скрипт, где можно посмотреть демонстрацию его работы.
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Запрет выделение текста на сайте с помощью CSS (Как запретить выделение содержимого на веб странице)
  • Страница 1 из 1
  • 1
Поиск: