Comment désactiver la sélection de texte, couper, copier, coller et faire un clic droit sur une page Web
Si vous souhaitez empêcher les autres de voler du contenu sur votre site Web, vous pouvez le faire dans une certaine mesure à l'aide de CSS, JavaScript et jQuery. Dans cet article, vous apprendrez comment désactiver la sélection de texte, couper, copier, coller et cliquer avec le bouton droit sur une page Web.
Désactiver la sélection de texte à l'aide de CSS ou JavaScript
Vous pouvez désactiver la sélection de texte d'une page Web complète ou d'une partie de la page à l'aide de CSS, JavaScript ou jQuery.
Comment désactiver la sélection de texte de la page Web complète à l'aide de JavaScript
Utilisez les attributs d'événement onmousedown et onselectstart avec la balise body pour désactiver la sélection de texte d'une page Web complète. Ces événements remplacent le comportement par défaut des navigateurs.
<!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>Comment désactiver la sélection de texte d'une partie de la page Web à l'aide de JavaScript
Utilisez les attributs d'événement onmousedown et onselectstart avec la balise HTML sur ceux sur lesquels vous souhaitez désactiver la sélection de texte. Dans l'exemple ci-dessous, la sélection de texte est désactivée pour la 2e balise 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>Comment désactiver la sélection de texte de la page Web complète à l'aide de CSS
Utilisez la propriété CSS de sélection par l' utilisateur avec la balise body pour désactiver la sélection de texte d'une page Web complète. Pour certains navigateurs, vous devez ajouter une extension avant de sélectionner . Voici la liste complète des propriétés pour tous les navigateurs :
- Chrome , Opera : sélection par l'utilisateur
- Safari : -webkit-user-select
- Mozilla : -moz-user-select
- IE 10+ : -ms-user-select
Vous devez définir toutes ces propriétés sur aucune pour désactiver la sélection de texte.
<!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>Comment désactiver la sélection de texte d'une partie de la page Web à l'aide de CSS
Utilisez la propriété CSS sélectionnée par l'utilisateur avec la balise HTML sur ceux dont vous souhaitez désactiver la sélection de texte. Vous pouvez cibler ces éléments HTML à l'aide d'une classe ou d'un ID. Dans l'exemple ci-dessous, la sélection de texte est désactivée pour la 2e balise div . Ici, la classe est utilisée pour cibler la 2e 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>Comment désactiver couper, copier et coller à l'aide de JavaScript
Vous pouvez désactiver couper, copier et coller à l'aide des attributs d'événement oncut , oncopy et onpaste avec les éléments HTML cibles. Si vous souhaitez désactiver couper, copier et coller pour la page Web complète, vous devez utiliser ces attributs d'événement avec la balise body. Vous pouvez également désactiver le glisser-déposer à l'aide des attributs d'événement ondrag et ondrop . Dans l'exemple ci-dessous, couper, copier, coller, faire glisser et déposer sont désactivés pour la balise d'entrée.
<!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>Comment désactiver couper, copier et coller à l'aide de jQuery
Vous pouvez désactiver couper, copier et coller sur une page Web à l'aide de la fonction jQuery bind() . Dans la fonction bind() , vous devez spécifier les événements couper, copier et coller qui sont déclenchés lorsqu'un utilisateur essaie de couper, copier ou coller quoi que ce soit sur la page Web. Assurez-vous d'intégrer la balise de script dans la section head pour charger jQuery avant de l'utiliser.
<!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>Comment désactiver le clic droit sur une page Web à l'aide de JavaScript
Vous pouvez désactiver le clic droit sur votre page Web en utilisant un événement oncontextmenu et en incluant « return false » dans le gestionnaire d'événements.
<!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>Comment désactiver le clic droit sur une page Web à l'aide de jQuery
Vous pouvez désactiver le clic droit sur votre page Web à l'aide de l'événement 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>Protégez votre site Web contre les cybercriminels
Les cybercriminels utilisent tous les outils possibles à leur disposition pour voler des données, spammer des sites Web ou pirater des informations sensibles à partir de pages protégées. Il est impératif d'inclure une couche de sécurité sur votre site Web pour les empêcher. Le spam des formulaires de sites Web est l'une des attaques les plus courantes de nos jours. Essayez d'ajouter la validation CAPTCHA aux formulaires de votre site Web pour éviter ces attaques de spam.