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

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

Так как неприятно, когда 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-.

Пример

<!DOCTYPE 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 к элементу <body>.

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

Примените onmousedown и onselectstart Events к тегам <body> или <div>, чтобы не разрешить выбор текста и копирование/вставку на веб-странице. Они переопределяют поведение по умолчанию браузеров.

Пример

<!DOCTYPE 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. При помощи добавления этих атрибутов в тег <input> текстового поля можно отключить функции вырезания, копирования и вставки. Пользователь имеет возможность ввести в поле вручную, когда установлены эти атрибуты.

Пример

<!DOCTYPE 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, которые срабатывают, когда пользователь вырезает или копирует текст.

Пример

<!DOCTYPE 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" в обработчике событий. Таким образом, вы заблокируете доступ с помощью правого щелчка мыши к контекстному меню.

Пример

<!DOCTYPE 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() для отключения правого щелчка мыши. Этот метод отключает правый щелчок (контекстное меню) в текстовом поле, а также предупреждает пользователю с помощью всплывающего сообщения.

Пример

<!DOCTYPE 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>
Запомните, что невозможно стопроцентно воспрепятствовать извлечению текста из вашего документа, так как есть много способов получения контента веб-страницы, например, консоль разработчика.

Считаете ли это полезным?

Похожие статьи