Css запрет контекстного меню

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

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

Предложенные ниже способы в основном базируются на методе всяческих запретов: запрета выделения текста, запрета копирования уже выделенного текста, запрета вызова контекстного меню и других методах.

Java-скрипт для запрета копирования

Коротенький Java-скрипт позволяет на выбор запретить вызов контекстного меню и запретить перетаскивание или выделение элементов. Для применения метода достаточно поместить код скрипта в заголовке страницы между тегами : можно использовать все, можно только соответствующие вашим целям строки скрипта.

 document.ondragstart = noselect; // запрет на перетаскивание document.onselectstart = noselect; // запрет на выделение элементов страницы document.oncontextmenu = noselect; // запрет на выведение контекстного меню function noselect()

HTML-разметка для запрета копирования

Метод защиты аналогичен способу с Java-скриптом, только на чистом HTML. Точно так же направлен на отключение контекстного меню, запрет на выделение и копирование. Указанные атрибуты можно использовать как по одному, так и в комбинации. Присваивать возможно как отдельным блокам , так и всей странице . Сохраняет функциональность при отключении выполнения скриптов в броузере. Не работает в Opera.

 
Абзац 1: oncopy - запрет копирования 
Абзац 2: oncontextmenu - запрет контекстного меню 
Абзац 3: onselectstart - запрет выделения
 

или для все страницы целиком

  
Абзац 1: oncopy - запрет копирования 
Абзац 2: oncontextmenu - запрет контекстного меню 
Абзац 3: onselectstart - запрет выделения
 
.
  

Использование стилей CSS

Атрибут unselectable

Достаточно поместить текст в блок с атрибутом unselectable , и текст будет защищен от выделение текста в именно ВНУТРИ этого блока, однако ничто не помешает его выделить, если начинать выделение ДО этого блока. Метод не работает в Mozila Firefox.

Текст c запретом выделения

Свойство слоев z-index

Суть метода заключается в помещении в самом верхнем слое перед текстом прозрачного изображения – текст за рисунком будет виден, но “подцепить” мышкой его для выделения не удастся.

Стилевое свойство user-select

Еще один способ отключить возможность выделить чтщ-либо на странице. Прежде всего необходимо определить либо в CSS, либо в самой страничке, класс, которому будет присвоено свойство блокировать возможность выделить что-либо на странице, например, назовем его .noselect и присвоим ему свойство user-select: none . Присвойте этот класс конкретному блоку, либо всей странице, либо заверните защищаемую часть страницы в блок с этим классом.

 .noselect 
Абзац 1 текста, защищенного от возможности выделить 
Абзац 2 текста, защищенного от возможности выделить
 

Вместо послесловия

Все перечисленные в статье методы защиты текста от копирования просты, но и в тоже время настолько же и малоэффективны. Подобные “чисто технические” ухищрения вызовут только кривенькую ухмылку у “профи” копирайтинга и неподдельное раздражение у простого пользователя. Единственный “надежный” способ чисто технически защитить информацию от копирования – это просто отказаться от ее публикации в открытых источниках. Чтобы понять, это достаточно ознакомиться с тем, насколько легко скопировать текст с «защищенного» сайта. Если уж вы решили опубликовать что-то для людей, то пусть на здоровье пользуются – копируют себе в заметки, мемуары или куда еще хотят для личного пользования. Другое дело, если ваш труд выдают за свой в своих личных меркантильных интересах. Что бы такой номер не прошел или его отрицательный эффект для вас сказался в наименьшей степени нужно задуматься о том, как организовать защиту контента от воровства – об этом наш следующий мой рассказ.

Источник

Как запретить контекстное меню (правую кнопку мыши) на изображениях. 4 способа.

Прежде всего вы должны знать, что запрет контекстного меню не гарантирует вам того, что пользователь не сможет сохранить картинку к себе на комп. Даже если он не знает, как отключать JavaScript, он сможет воспользоваться инструментами для разработчика в браузере или какой-нибудь сторонней программкой для создания скриншотов.

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

Способ 1. При помощи JavaScript

В данном случае всё, что нам потребуется, это вставить следующий код в ваш исполняемый js-файл или между тегами прямо в тело документа.

Имейте ввиду, что если вы вставите код в конец HTML-документа, то запрет на контекстное меню сработает не сразу, а только по мере подгрузки страницы. Это будет хорошо ощутимо с медленным интернет-соединением.

function disablecontext(e) { var clickedEl = (e==null) ? event.srcElement.tagName : e.target.tagName; if (clickedEl == "IMG") { alert(errorMsg); return false; } } var errorMsg = "Вы не можете сохранять изображения с этого сайта."; document.oncontextmenu = disablecontext;

Способ 2. Задействуем jQuery, тем самым сократив код

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

$('img').bind('contextmenu', function(e) { return false; });

Способ 3. При помощи CSS

Интересный способ. Отлично подойдёт для элементов интерфейса и не сгодится для изображений в контенте сайта (плохо для SEO — такие изображения не увидят поисковики).
Итак, предположим, у нас есть какое-то изображение:

img src="http://truemisha.com/image.png" width="32" height="55" />

Теперь, вместо этой строчки вставляем блок , добавляем ему атрибут ID (например my_image) и приписываем следующие стили:

div#my_image{ width: 32px; height: 55px; background: url('http://truemisha.com/image.png') 0 0 no-repeat; }

В результате, хоть контекстное меню и не исчезнет полностью, из него пропадут такие пункты, как «Сохранить картинку как…» и «Копировать URL картинки». Пример для Google Chrome:

Запрет контекстного меню на конкретных изображениях при помощи HTML-атрибута

Данный способ актуален при использовании для определённых изображений.

img oncontextmenu='alert("Вы не можете сохранить это изображение.");return false;' border="0" src="http://truemisha.com/image.png" />

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Источник

Как отключить выбор текста, копирование, вырезание, вставку и правый щелчок мыши на веб-странице

Иногда может быть очень полезно воспрепятствование выбору некоторых частей веб-страницы.

Так как неприятно, когда user-selection отключен, будет лучше применить ограничения не для всей всей веб-страницы. Вместо этого отключите выбор текста для тех частей или определенных артиклей, которые, вы думаете, могут быть украдены. Используйте в случаях, если это поможет усовершенствовать UX вашей веб-страницы.

Независимо от того, какая у вас причина для отключения user-selection, если вы пришли к этому, то находитесь в правильном месте, чтобы изучить все это с помощью CSS, Javascript и jQuery.

Как отключить выбор текста с помощью CSS

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

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

• Chrome, Opera (older versions), IOS Safari: -webkit-user-select
• Safari: -webkit-touch-callout
• Mozilla: -moz-user-select
• Internet Explorer, Edge: -ms-user-select
• KHTML browsers (Konqueror): -khtml-user-select

Chrome (начиная с 54.0 версии) и Opera (начиная с 41.0 версии) поддерживают user-select без префикса -webkit-.

Пример

html> html> head> title>Заголовок документа title> style> .unselectable < -webkit-user-select: none; -webkit-touch-callout: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #cc0000; > style> head> body> p>Это выбираемый текст. Выберите текст. p> div class="unselectable">Это невыбираемый текст. Выбираемость текста отключена. div> body> html>

Если вам необходимо отключить выбираемость текста для всей страницы, примените user-select к элементу .

Как отключить выбираемость текста с помощью JavaScript

Пример

html> html> head> title>Заголовок документа title> head> body onmousedown="return false" onselectstart="return false"> h2>Unselectable text h2> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. p> body> html>

Как отключить копирование, вырезание и вставку с помощью JavaScript/jQuery

Можно разрешить выбор текста, но запретить функции копирования и вырезания с помощью event атрибутов oncopy , oncut и onpaste . При помощи добавления этих атрибутов в тег текстового поля можно отключить функции вырезания, копирования и вставки. Пользователь имеет возможность ввести в поле вручную, когда установлены эти атрибуты.

Пример

html> html> head> title>Заголовок документа title> head> body> h2>Копирование, вырезание и вставка отключены h2> input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/>br> body> html>

Можно иметь такой же эффект с помощью jQuery функции bind(), указывающий события cut и copy, которые срабатывают, когда пользователь вырезает или копирует текст.

Пример

html> html> head> title>Заголовок документа title> head> body> h2>Копирование и вырезание отключены h2> p>Невозможно скопировать или вырезать этот текст. p> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> script> script type="text/javascript"> $(document).ready(function ( ) < $('body').bind('cut copy', function (e) < e.preventDefault(); >); >); script> body> html>

Как отключить правый щелчок мыши с помощью JavaScript/jQuery

Для того, чтобы отключить правый щелчок на странице, нужно добавить событие oncontextmenu и «return false» в обработчике событий. Таким образом, вы заблокируете доступ с помощью правого щелчка мыши к контекстному меню.

Пример

html> html> head> title>Заголовок документа title> head> body> h2>Копирование и вырезание отключены h2> p>Невозможно скопировать или вырезать этот текст. p> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> script> script type="text/javascript"> $(document).ready(function ( ) < $('body').bind('cut copy', function (e) < e.preventDefault(); >); >); script> body> html>

Используйте jQuery функцию bind() для отключения правого щелчка мыши. Этот метод отключает правый щелчок (контекстное меню) в текстовом поле, а также предупреждает пользователю с помощью всплывающего сообщения.

Пример

html> html> head> title>Заголовок документа title> head> body> h2>Правый щелчок отключен h2> p>Для этой страницы правый щелчок отключен. p> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> script> script type="text/javascript"> $(document).ready(function ( ) < $("body").on("contextmenu",function(e)< return false; >); >); script> body> html>

Запомните, что невозможно стопроцентно воспрепятствовать извлечению текста из вашего документа, так как есть много способов получения контента веб-страницы, например, консоль разработчика.

Источник