Cómo deshabilitar la selección de texto, cortar, copiar, pegar y hacer clic con el botón derecho en una página web
Si desea evitar que otros roben contenido de su sitio web, puede hacerlo hasta cierto punto con la ayuda de CSS, JavaScript y jQuery. En este artículo, aprenderá a deshabilitar la selección de texto, cortar, copiar, pegar y hacer clic con el botón derecho en una página web.
Deshabilitar la selección de texto usando CSS o JavaScript
Puede deshabilitar la selección de texto de una página web completa o una parte de la página usando CSS, JavaScript o jQuery.
Cómo deshabilitar la selección de texto de la página web completa usando JavaScript
Utilice los atributos de evento onmousedown y onselectstart con la etiqueta del cuerpo para deshabilitar la selección de texto de una página web completa. Estos eventos anulan el comportamiento predeterminado de los 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>Cómo deshabilitar la selección de texto de una parte de la página web usando JavaScript
Utilice los atributos de evento onmousedown y onselectstart con la etiqueta HTML en aquellos en los que desee deshabilitar la selección de texto. En el siguiente ejemplo, la selección de texto está deshabilitada para la segunda etiqueta 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>Cómo deshabilitar la selección de texto de la página web completa usando CSS
Utilice la propiedad CSS seleccionada por el usuario con la etiqueta del cuerpo para deshabilitar la selección de texto de una página web completa. Para algunos navegadores, es necesario agregar una extensión antes de la selección del usuario . Aquí está la lista completa de propiedades para todos los navegadores:
- Chrome , Opera : selección de usuario
- Safari : -webkit-user-select
- Mozilla : -moz-user-select
- IE 10+ : -ms-user-select
Debe establecer todas estas propiedades en ninguna para deshabilitar la selección 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>Cómo deshabilitar la selección de texto de una parte de la página web usando CSS
Use la propiedad CSS seleccionada por el usuario con la etiqueta HTML en aquellos de los que desea deshabilitar la selección de texto. Puede orientar esos elementos HTML mediante una clase o ID. En el siguiente ejemplo, la selección de texto está deshabilitada para la segunda etiqueta div . Aquí, la clase se usa para apuntar al 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>Cómo deshabilitar cortar, copiar y pegar usando JavaScript
Puede deshabilitar cortar, copiar y pegar utilizando los atributos de evento oncut , oncopy y onpaste con los elementos HTML de destino. Si desea deshabilitar cortar, copiar y pegar para la página web completa, debe usar estos atributos de evento con la etiqueta del cuerpo. También puede deshabilitar la función de arrastrar y soltar usando los atributos de evento ondrag y ondrop . En el siguiente ejemplo, cortar, copiar, pegar, arrastrar y soltar están deshabilitados para la etiqueta 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>Cómo deshabilitar cortar, copiar y pegar con jQuery
Puede deshabilitar cortar, copiar y pegar en una página web usando la función jQuery bind () . En la función bind () , debe especificar los eventos de cortar, copiar y pegar que se activan cuando un usuario intenta cortar, copiar o pegar algo en la página web. Asegúrese de incrustar la etiqueta del script en la sección principal para cargar jQuery antes de usarlo.
<!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>Cómo deshabilitar el clic derecho en una página web usando JavaScript
Puede deshabilitar el clic derecho en su página web usando un evento oncontextmenu e incluyendo "return false" en el controlador 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>Cómo deshabilitar el clic derecho en una página web usando jQuery
Puede deshabilitar el clic derecho en su página web usando el evento del menú contextual .
<!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 su sitio web de los ciberdelincuentes
Los ciberdelincuentes utilizan todas las herramientas posibles a su disposición para robar datos, sitios web de spam o piratear información confidencial de páginas protegidas. Es imperativo incluir una capa de seguridad en su sitio web para evitarlos. Enviar spam a los formularios de sitios web es uno de los ataques más comunes en estos días. Intente agregar la validación CAPTCHA a los formularios de su sitio web para evitar estos ataques de spam.