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