Запрет копирования текста на сайте

Эта тема уже заезжена в интернете вдоль и поперек, поэтому я ее хотел бы поднять с той точки зрения, нужно ли это вам? Хотя и пример запрет на копирование текста мы тоже наглядно разберем.

Товарищ, загляни ко мне в код

Начнем с того, что те, кто действительно будут копировать ваш контент – это не обычные пользователи. Обычно это боты, парсеры и т.д., т.е. продвинутые программисты и вы действительно думаете, что методы для обычных пользователей вас спасут? Но бывают случаи, когда на ваш сайт заходит и более продвинутый пользователь и возникает желание скопировать какой-нибудь отрезок текста, а у него это не получается и что тогда? А ведь все и норовит на то, чтобы заглянуть в код страницы. Поэтому смысла в этом ограничении не вижу, ну если только вы хотите, чтобы кто-то лишний раз поковырялся в коде вашего сайта.

Многие пользователи, как, к примеру, и я, читая очередную статью могут просто водить по тексту, выделяя его мышкой, а если у вас стоит блок события по выделению, то это реально напрягает. Еще жуть как не люблю, когда ставят этот плагин расшаривалок социальных сетей. Ну зачем это нужно? Создает ужасный дискомфорт. Сидишь просто выделил текст, а тебе вылазит каждый раз блок поделиться с иконками всех социалок. В общем, если я вас не переубедил, усложняйте себе жизнь дальше!

Запрещаем выделение CSS

Есть замечательное свойство user-select с помощью которого мы сможем запретить пользователю выделить текст, а отсюда и скопировать его. Вот решение для всех браузеров:

.notForCopy { 
  -webkit-user-select: none; /* для Chrome
  -moz-user-select: none; /* для Firefox 
  -ms-user-select: none; /* для IE 10+ 
   user-select: none; 
}

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

Вешаем действия на события Javascript

Итак, здесь у нас гораздо больше вариаций для выполнения поставленной задачи. Можно немного покреативить, но самый простой способ – это предотвращать вызов контекстного меню(клик правой кнопки) либо выделение текста левой клавишей мыши. На все это необходимо повесить обработчик с возвращением значения false. Выглядеть это будет примерно так:

/* запрет на выделение элемента */ 
Element.oncontextmenu = function(){ return false; } 
/* запрет на выделение всего документа */ 
document.oncontextmenu = function(){ return false; }

Либо сразу добавлять, что ни есть хорошо, к самому элементу обработчик:

<p oncontextmenu=”return false;”>этот текст нельзя будет скопировать</p>

В коде js у нас гораздо больше возможностей, поэтому мы также сможем запретить выделение:

element.ondblclick = function(){return false;}
element.onselectstart = function(){return false;} 
element.onmousedown = function(){return false;}

Тут мы отслеживаем сразу несколько событий – двойной клик, начало выделения и обычный клик мыши. Можем немного подшутить над пользователем, кстати только ради этого я и вижу смысл в этой затее:

element.onselectstart = function(){alert (‘Но-но-но! Ты что собрался делать?’); return false;}

Но повторюсь еще раз, это лишь несколько решений, которые для меня кажутся бессмысленными. Можно еще отслеживать клик и добавлять в буфер ссылку на источник, можно текст перебивать блоками div или span или вообще забивать невидимыми для визуального режима каракозяблами, но делая его сложным для копирования через код страницы. Все это можно сделать, возникает только вопрос, а нужно?

Тем, кто хочет скопировать текс – он это сделает любым способом, потому что он знает эти методы.

не скупись оцени статью