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

Отключение выделения текста, вырезания, копирования и щелчка правой кнопкой мыши на странице с помощью jQuery и JavaScript

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

1. Отключить выделение текста с помощью JavaScript/jQuery

Вы можете использовать следующий код, чтобы предотвратить выделение текста (и, следовательно, копирование-вырезание) внутри тега body или div. Он в основном переопределяет поведение браузера по умолчанию на onmousedown а также onselectstart мероприятие.

JS

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

JS

jQuery

2. Отключить выделение текста с помощью CSS

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

CSS

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

3. Отключить правый клик:

Вы можете использовать следующий код, чтобы предотвратить щелчок правой кнопкой мыши на любой странице. Идея состоит в том, чтобы захватить onContextMenu событие и вернуть false в обработчике события. Это заблокирует любой доступ к контекстному меню с помощью щелчка правой кнопкой мыши, а также с клавиатуры.

JS

jQuery

4. Шифрование HTML:

Все вышеупомянутые методы будут работать нормально, но ваш исходный код HTML по-прежнему уязвим. Вы можете предотвратить кражу исходного кода другими, используя это Инструмент для шифрования HTML.

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

Это все об отключении выделения текста, вырезании, копировании и щелчке правой кнопкой мыши на странице.

Средний рейтинг 4.32 /5. Подсчет голосов: 41

Голосов пока нет! Будьте первым, кто оценит этот пост.

Сожалеем, что этот пост не оказался для вас полезным!

Расскажите, как мы можем улучшить этот пост?

Источник

Выделение текста для копирования CSS

Если скопировать выделенный текст вместе с изображением , то вместо картинки будет содержимое её атрибута alt . Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  
Если скопировать выделенный текст вместе с изображением  src="//4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s00/smail-bolshoi-palets-vverh.gif" alt="Смайлик «Большой палец вверх»" height="104" width="147" title="Отлично!"/>, то вместо картинки будет содержимое её атрибута alt. Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  
Текст будет скопирован без картинки  src="//4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s00/smail-bolshoi-palets-vverh.gif" alt="Смайлик «Большой палец вверх»" height="104" width="147" title="Отлично!"/>. Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  contenteditable --> 
contenteditable>Изменить меня с user-select: auto;
 
contenteditable>Изменить меня с user-select: all;
 
contenteditable>Изменить меня с user-select: none;

Активные псевдоэлементы ::before и ::after

  
Нельзя выделить и скопировать содержимое псевдоэлементов.

Источник

Выделение текста для копирования CSS

Если скопировать выделенный текст вместе с изображением , то вместо картинки будет содержимое её атрибута alt . Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  
Если скопировать выделенный текст вместе с изображением  src="//4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s00/smail-bolshoi-palets-vverh.gif" alt="Смайлик «Большой палец вверх»" height="104" width="147" title="Отлично!"/>, то вместо картинки будет содержимое её атрибута alt. Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  
Текст будет скопирован без картинки  src="//4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s00/smail-bolshoi-palets-vverh.gif" alt="Смайлик «Большой палец вверх»" height="104" width="147" title="Отлично!"/>. Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  contenteditable --> 
contenteditable>Изменить меня с user-select: auto;
 
contenteditable>Изменить меня с user-select: all;
 
contenteditable>Изменить меня с user-select: none;

Активные псевдоэлементы ::before и ::after

  
Нельзя выделить и скопировать содержимое псевдоэлементов.

Источник

user-select¶

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

Обычно применяется для интерактивных элементов, на которые можно щёлкать, например, вкладки, и для которых выделение текста нежелательно.

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

/* Keyword values */ user-select: none; user-select: auto; user-select: text; user-select: contain; user-select: all; /* Global values */ user-select: inherit; user-select: initial; user-select: unset; /* Mozilla-specific values */ -moz-user-select: none; -moz-user-select: text; -moz-user-select: all; /* WebKit-specific values */ -webkit-user-select: none; -webkit-user-select: text; /* Doesn't work in Safari; use only "none" or "text", or else it will allow typing in the container */ -webkit-user-select: all; /* Microsoft-specific values */ -ms-user-select: none; -ms-user-select: text; -ms-user-select: element; 

Значения¶

auto Для редактируемых элементов значение принимается contain . Если у родителя значение user-select установлено как all , то для элемента оно тоже будет all . Если у родителя значение user-select установлено как none , то для элемента оно тоже будет none . Во всех остальных случаях принимается значение text . none Пользователю запрещено выделять элемент. text Пользователь может выделить текст в элементе. all Позволяет выделить текст внутри элемента, включая дочерние элементы. contain Позволяет выделять текст, но только внутри границ элемента.

Примечание¶

• Internet Explorer поддерживает свойство -ms-user-select .
• Chrome, Opera, Safari и Android поддерживают свойство -webkit-user-select .
• Firefox поддерживает свойство -moz-user-select .
• Значение contain поддерживается только в IE.

Значение по-умолчанию: auto

Применяется ко всем элементам

Спецификации¶

Поддержка браузерами¶

Can I Use user-select-none? Data on support for the user-select-none feature across the major browsers from caniuse.com.

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

html> head> meta charset="utf-8" /> title>user-selecttitle> style> body  -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; > .enable  -ms-user-select: all; -moz-user-select: all; -webkit-user-select: all; user-select: all; > style> head> body> p>Этот текст нельзя выделитьp> p> input type="text" value="Этот текст можно выделить" /> p> p class="enable"> Этот b>текстb> тоже можно выделить p> body> html> 

Источник

Запретить выделение текста (CSS)

Запретить выделение текста можно при помощи свойства CSS — user-select . Для старых браузеров необходимо подставлять префикс, у каждого браузера свой префикс.

-webkit-user-select — вебкит браузеры (Хром, Сафари);

user-select — для браузеров последних версий.

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

Категории

Читайте также

• Размер шрифта (CSS)
• CSS хак (IE7)
• CSS хак (IE8)
• div height 100 (CSS)
• Растянуть таблицу на всю ширину без отступов (CSS)
• Курсор рука (CSS)
• Ссылка без подчеркивания
• CSS меню картинками
• Как подключить CSS только для IE 6
• Lorem Ipsum по-русски
• Min-width для IE6
• Валидный HTML-тег HR

Источник