Como desativar a seleção de texto, recortar, copiar, colar e clicar com o botão direito em uma página da web
Se você deseja evitar que outras pessoas roubem conteúdo do seu site, você pode fazer isso até certo ponto com a ajuda de CSS, JavaScript e jQuery. Neste artigo, você aprenderá como desabilitar a seleção de texto, recortar, copiar, colar e clicar com o botão direito em uma página da web.
Desativar seleção de texto usando CSS ou JavaScript
Você pode desativar a seleção de texto de uma página da web completa ou de parte da página usando CSS, JavaScript ou jQuery.
Como desativar a seleção de texto da página da Web completa usando JavaScript
Use os atributos de evento onmousedown e onselectstart com a tag body para desativar a seleção de texto de uma página da web completa. Esses eventos substituem o comportamento padrão dos navegadores.
<!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>Como desativar a seleção de texto de uma parte da página da Web usando JavaScript
Use os atributos de evento onmousedown e onselectstart com a tag HTML naqueles em que deseja desabilitar a seleção de texto. No exemplo a seguir, a seleção de texto está desabilitada para a segunda tag 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>Como desativar a seleção de texto da página da Web completa usando CSS
Use a propriedade CSS selecionada pelo usuário com a tag body para desabilitar a seleção de texto de uma página da web completa. Para alguns navegadores, você precisa adicionar uma extensão antes da seleção do usuário . Aqui está a lista completa de propriedades para todos os navegadores:
- Chrome , Opera : seleção do usuário
- Safari : -webkit-user-select
- Mozilla : -moz-user-select
- IE 10+ : -ms-user-select
Você precisa definir todas essas propriedades como nenhuma para desabilitar a seleção de texto.
<!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>Como desativar a seleção de texto de uma parte da página da Web usando CSS
Use a propriedade CSS selecionada pelo usuário com a marca HTML naqueles que você deseja desabilitar a seleção de texto. Você pode direcionar esses elementos HTML usando uma classe ou ID. No exemplo a seguir, a seleção de texto está desabilitada para a segunda tag div . Aqui, a classe é usada para atingir o segundo 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>Como desativar recortar, copiar e colar usando JavaScript
Você pode desativar recortar, copiar e colar usando os atributos de evento oncut , oncopy e onpaste com os elementos HTML de destino. Se você deseja desativar recortar, copiar e colar para a página da web completa, você precisa usar esses atributos de evento com a tag body. Você também pode desativar arrastar e soltar usando ondrag e atributos de eventos OnDrop. No exemplo a seguir, cortar, copiar, colar, arrastar e soltar estão desabilitados para a tag de entrada.
<!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>Como desativar recortar, copiar e colar usando jQuery
Você pode desativar recortar, copiar e colar em uma página da web usando a função jQuery bind () . Na função bind () , você deve especificar os eventos cortar, copiar e colar que são disparados quando um usuário tenta cortar, copiar ou colar qualquer coisa na página da web. Certifique-se de incorporar a tag de script na seção head para carregar o jQuery antes de usá-lo.
<!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>Como desativar o clique com o botão direito em uma página da Web usando JavaScript
Você pode desativar o clique com o botão direito do mouse em sua página da web usando um evento oncontextmenu e incluindo "return false" no manipulador de eventos.
<!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>Como desativar o clique com o botão direito em uma página da Web usando jQuery
Você pode desativar o clique com o botão direito do mouse em sua página da web usando o evento 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>Proteja seu site de cibercriminosos
Os cibercriminosos usam todas as ferramentas possíveis à sua disposição para roubar dados, sites de spam ou hackear informações confidenciais de páginas protegidas. Incluir uma camada de segurança em seu site para evitar isso é imperativo. O spam de formulários de sites é um dos ataques mais comuns atualmente. Experimente adicionar validação CAPTCHA aos formulários do seu site para evitar esses ataques de spam.
