Защищаем текст на сайте от копирования
Ниже представлены примеры защиты текста на сайте от копирования, добавление копирайта при копировании и отключение выделения текста в браузере. Пример с разрешением копировать текст при "авторизации" через куки.
Запретить копировать текст с сайта
Первый вариант – добавить атрибут oncopy="return false;"
к тегу body
.
<body oncopy="return false;"> // ... </body>
Или запретить копировать конкретный элемент:
// ... <div class="product" oncopy="return false;"> // ... </div> // ...
Второй вариант - использовать JQuery:
$(function(){ $('body').attr('oncopy', 'return false;'); } // Или $(function(){ $('.product').attr('oncopy', 'return false;'); } // Или так: $('.product').bind('copy cut drag drop', function (e) { e.preventDefault(); });
При копировании текста добавить к нему копирайт
document.oncopy = function(){ var body = document.getElementsByTagName('body')[0]; var selection = window.getSelection(); var div = document.createElement('div'); div.style.position = 'absolute'; div.style.left = '-99999px'; body.appendChild(div); div.innerHTML = selection + ' Источник: Site.com'; selection.selectAllChildren(div); window.setTimeout(function(){ body.removeChild(div); }, 0); }
Можно добавить адрес текущий страницы:
div.innerHTML = selection + ' Источник ' + window.location.href;
Отключить контекстное меню
$('body').on('contextmenu', false);
У элементов с class="product":
$('.product').on('contextmenu', false);
Отключить выделение текста в браузере
Через CSS можно отключить выделение текста (не поддерживается старыми браузерами).
* { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
Разрешить копировать после "авторизации" через куки
Здесь я покажу пример реализации запрета копирования, до момента "авторизации" через куки. В данном примере я использую библиотеку jQuery Cookie, которую можно скачать по этой ссылке .
$(window).ready(function() { var copy = $.cookie('copy') password = 'password'; $('body').bind('copy cut drag drop', function (e) { e.preventDefault(); }); $('.link_copy').on('click', function () { while(prompt('Чтобы войти, авторизуйтесь') != password) { alert('Это неправильный пароль, пожалуйста, введите пароль еще раз '); } alert('Добро пожаловать! Пароль введён верно!'); if(copy == null){ $('body').unbind('copy cut drag drop'); $.cookie('copy', 'copy', { expires: 30, path: '/' }); } }); if(copy != null){ $('body').unbind('copy cut drag drop'); } });
Суть данного кода такова - пользователь по умолчанию не может копировать на сайте информацию. Есть некий элемент (.link_copy
), на который мы навешиваем событие клика (on('click', ...
). Этим элементом может быть что угодно (ссылка, изображение и тд.). При клике по данному элементу появляется alret с текстовым полем для ввода пароля (password) и предложением авторизоваться. Если введённые пользователем данные совпадают с установленным паролем, то появляется приветствие "Добро пожаловать! Пароль введён верно!", на машине пользователя библиотека jQuery Cookie установит куку на время, указанное в директиве expires
. Пользователь авторизован, а это значит, что правила запрета копирования к данному пользователю уже не применимы.
Это простой пример, который можно (возможно и нужно) расширять под свои задачи. Перед применением данного примера, ознакомьтесь с библиотекой jQuery Cookie. На сегодняшний день она вроде как не поддерживается, но на практике она вполне себе рабочая. Возможно стоит поискать альтернативу.