• Страница 1 из 1
  • 1
Запретить выделение и копирование текста в CSS
Kosten
Понедельник, 08 Апреля 2019, 23:26 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44492
Награды: 70
При проектировании сайта бывают ситуации, когда выбор текста нежелателен. Это может относиться не ко всей веб-странице, а только к определенным элементам на ней. Отключение возможности выделения и выделения текста может быть достигнуто различными способами. Использование JavaScript, это один из методов, но иногда предпочтение отдается использованию CSS.

Вариант CSS 1

Следующий код CSS охватывает отключение выделения текста во всех основных браузерах:

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;
/* Версия без префикса, в настоящее время не поддерживается ни одним браузером */
}


Почти все браузеры поддерживаются пользователем, кроме Internet Explorer 9 и более ранних версий. Однако, поскольку это не стандартная функция, могут возникнуть проблемы при реализации кода в разных браузерах

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

Вариант CSS №2

Альтернативный подход CSS с использованием контейнера div будет использовать следующий код:

HTML

Код
<div id="zornet_ru" class="atudsam-igedsamib">это описание не скопировать</div>


CSS

Код
.atudsam-igedsamib {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none; user-select: none;
}


Поскольку это свойство не следует, так как тег придется применять для каждого элемента в контейнере div

Опция Javascript

Опция JavaScript должна быть рассмотрена, когда вышеупомянутые опции CSS не работают. Следующий код может быть использован для потомков элемента.

Код
function makeUnselectable(node) {
if (node.nodeType == 1) {
node.setAttribute("unselectable", "on");
}
var child = node.firstChild; while (child) {
makeUnselectable(child); child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));


Более простой вариант JavaScript, который можно рассмотреть:

Код
onselectstart="return false;"


Важно помнить, что ни один из этих вариантов не охватывает все возможности. Кроме того, возможность выбора отключена только внутри элементов, покрытых кодом CSS или JavaScript.

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

Помните, что нет быстрого и простого способа реализовать эту функцию, особенно с помощью CSS, поэтому Javascript может быть наиболее приемлемым вариантом.

Средствами JavaScript (jQuery)

Суть скрипта — добавить все тот же набор CSS-правил для всех браузеров, создать атрибут unselectable и вернуть false при возникновении события onselectstart в IE.

Завернем наш скрипт в плагин, например jquery.disableSelection.js

Код
jQuery.fn.extend({
  disableSelection : function() {
    this.each(function() {
      this.onselectstart = function() { return false; };
      this.unselectable = "on";

      jQuery(this).css({
        '-moz-user-select': 'none',
        '-o-user-select': 'none',
        '-khtml-user-select': 'none',
        '-webkit-user-select': 'none',
        '-ms-user-select': 'none',
        'user-select': 'none'
      });

      // Для Opera
      jQuery(this).bind('mousedown', function() { return false; });
    });
  }
});


На веб-странице вызываем его так:

Код
<script type="text/javascript">
jQuery(function(){
  jQuery('body *').disableSelection();
});
</script>


Когда нужно это подключать:

Многие веб-мастера предпочитают отключать функцию выделения и выделения текста, чтобы предотвратить несанкционированное копирование контента со своего веб-сайта. Однако нет надежного способа полностью отключить выделение текста.

Отключение выделения текста может работать для любительских скребков контента, но не мешает копированию HTML и программ автоматического копирования. Поэтому он имеет ограниченную выгоду по назначению.
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: