Как отключить выделение текста, вырезать, копировать, вставить и щелкнуть правой кнопкой мыши на веб-странице
Если вы хотите предотвратить кражу контента с вашего веб-сайта другими людьми, вы можете сделать это в определенной степени с помощью CSS, JavaScript и jQuery. В этой статье вы узнаете, как отключить выделение текста, вырезать, копировать, вставлять и щелкать правой кнопкой мыши веб-страницу.
Отключить выделение текста с помощью CSS или JavaScript
Вы можете отключить выделение текста для всей веб-страницы или ее части с помощью CSS, JavaScript или jQuery.
Как отключить выделение текста на всей веб-странице с помощью JavaScript
Используйте атрибуты событий onmousedown и onselectstart с тегом body, чтобы отключить выделение текста на всей веб-странице. Эти события переопределяют поведение браузеров по умолчанию.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body onmousedown="return false" onselectstart="return false">
<div>
Founded in 2007, MUO has grown into one of the largest online technology publications on the web.
Our expertise in all things tech has resulted in millions of visitors every month and hundreds of thousands of fans on social media.
We believe that technology is only as useful as the one who uses it.
Our aim is to equip readers like you with the know-how to make the most of today's tech, explained in simple terms that anyone can understand.
We also encourage readers to use tech in productive and meaningful ways.
</div>
</body>
</html>Как отключить выделение текста в части веб-страницы с помощью JavaScript
Используйте атрибуты событий onmousedown и onselectstart с тегом HTML для тех, для которых вы хотите отключить выделение текста. В приведенном ниже примере выделение текста для второго тега div отключено.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body>
<div>
Text selection is enabled for this text.
</div>
<div onmousedown="return false" onselectstart="return false">
Text selection is disabled for this text.
</div>
</body>
</html>Как отключить выделение текста на всей веб-странице с помощью CSS
Используйте свойство CSS, выбираемое пользователем, с тегом body, чтобы отключить выделение текста на всей веб-странице. Для некоторых браузеров перед выбором пользователя необходимо добавить расширение. Вот полный список свойств для всех браузеров:
- Chrome , Opera : по выбору пользователя
- Safari : -webkit-user-select
- Mozilla : -moz-user-select
- IE 10+ : -ms-пользователь-выбор
Вам необходимо установить для всех этих свойств значение none, чтобы отключить выделение текста.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<style>
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div>
Founded in 2007, MUO has grown into one of the largest online technology publications on the web.
Our expertise in all things tech has resulted in millions of visitors every month and hundreds of thousands of fans on social media.
We believe that technology is only as useful as the one who uses it.
Our aim is to equip readers like you with the know-how to make the most of today's tech, explained in simple terms that anyone can understand.
We also encourage readers to use tech in productive and meaningful ways.
</div>
</body>
</html>Как отключить выделение текста в части веб-страницы с помощью CSS
Используйте свойство CSS, выбираемое пользователем, с тегом HTML для тех, для которых вы хотите отключить выделение текста. Вы можете настроить таргетинг на эти HTML-элементы, используя класс или идентификатор. В приведенном ниже примере выделение текста для второго тега div отключено. Здесь класс используется для нацеливания на второй div.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<style>
.disable-text-selection {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div>
Text selection is enabled for this text.
</div>
<div class="disable-text-selection">
Text selection is disabled for this text.
</div>
</body>
</html>Как отключить вырезание, копирование и вставку с помощью JavaScript
Вы можете отключить вырезание, копирование и вставку с помощью атрибутов событий oncut , oncopy и onpaste с целевыми элементами HTML. Если вы хотите отключить вырезание, копирование и вставку для всей веб-страницы, вам необходимо использовать эти атрибуты событий с тегом body. Вы также можете отключить перетаскивание с помощью атрибутов события ondrag и ondrop . В приведенном ниже примере для входного тега отключены вырезание, копирование, вставка, перетаскивание и опускание.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body>
<div>
Cut, Copy, and Paste is disabled for the below input element.
</div>
<input
type="text"
onselectstart="return false"
oncut="return false"
oncopy="return false"
onpaste="return false"
ondrag="return false"
ondrop="return false"
/>
</body>
</html>Как отключить вырезание, копирование и вставку с помощью jQuery
Вы можете отключить вырезание, копирование и вставку на веб-странице с помощью функции jQuery bind () . В функции bind () вы должны указать события вырезания, копирования и вставки, которые запускаются, когда пользователь пытается вырезать, скопировать или вставить что-либо на веб-странице. Обязательно вставьте тег скрипта в раздел заголовка, чтобы загрузить jQuery перед его использованием.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>
Cut, Copy, and Paste is disabled for the complete web page.
</div>
<input type="text" />
<script type="text/javascript">
$(document).ready(function() {
$('body').bind('cut copy paste', function(event) {
event.preventDefault();
});
});
</script>
</body>
</html>Как отключить щелчок правой кнопкой мыши на веб-странице с помощью JavaScript
Вы можете отключить щелчок правой кнопкой мыши на своей веб-странице, используя событие oncontextmenu и включив «return false» в обработчик событий.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body>
<div>
Right Click is disabled for the complete web page.
</div>
<script type="text/javascript">
document.oncontextmenu = new Function("return false");
</script>
</body>
</html>Как отключить щелчок правой кнопкой мыши на веб-странице с помощью jQuery
Вы можете отключить щелчок правой кнопкой мыши на своей веб-странице с помощью события contextmenu .
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>
Right Click is disabled for the complete web page.
</div>
<script type="text/javascript">
$(document).bind("contextmenu",function(e){
return false;
});
</script>
</body>
</html>Защитите свой сайт от киберпреступников
Киберпреступники используют все возможные инструменты, имеющиеся в их распоряжении, для кражи данных, спама на веб-сайтах или взлома конфиденциальной информации с защищенных страниц. Включение уровня безопасности на ваш сайт, чтобы предотвратить это, является обязательным. Спам веб-форм – одна из самых распространенных атак в наши дни. Попробуйте добавить проверку CAPTCHA в формы своего веб-сайта, чтобы избежать этих спам-атак.