Comment Désactiver la Sélection de Texte, Copier, Couper, Coller et Clic Droit Sur une Page Web
Dans certains cas, il peut être rentable d'empêcher la sélection de certaines parties de votre page Web.
Comme la sélection des utilisateurs handicapés est très ennuyeuse, vous feriez mieux de ne pas la configurer pour l'ensemble de votre site Web. Désactivez plutôt la sélection de texte pour les pièces ou pour les articles spécifiques qui pourraient vous être volés. Utilisez-le dans des situations où il améliorera l'UX de votre site Web.
Quelle que soit la raison pour laquelle la sélection des utilisateurs est désactivée sur votre site Web, si vous êtes arrivé à cette étape, c’est le bon endroit pour apprendre à le faire facilement avec CSS, Javascript et jQuery.
Comment Désactiver la Sélection de Texte en Surbrillance Avec CSS
Rendre un texte non sélectionnable n’est pas une tâche difficile. Tout ce que vous avez à faire est de désactiver la sélectivité du texte pour tous les navigateurs sur lesquels votre page Web est susceptible d'être chargée.
Voyons les extensions à utiliser pour différents navigateurs pour désactiver la sélectivité d’un texte.
- Chrome, Opera (older versions), IOS Safari: -webkit-user-select
- Safari: -webkit-touch-callout
- Mozilla: -moz-user-select
- Internet Explorer, Edge: -ms-user-select
- Navigateurs KHTML(Konqueror): -khtml-user-select
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</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>Je suis un texte sélectionnable. Tu peux me sélectionner.</p>
<div class="unselectable">Je suis un texte non sélectionnable. Ma sélection de texte est désactivée.</div>
</body>
</html>Comment Désactiver la Sélection de Texte Avec JavaScript
Appliquez les Événements onmousedown et onselectstart à l'élément <body> ou à l'élément <div> pour empêcher la sélection de texte et copier/couper sur votre site web. Il annule le comportement par défaut des navigateurs.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body onmousedown="return false" onselectstart="return false">
<h2>Texte non sélectionnable</h2>
<p>
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla
ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.
</p>
</body>
</html>Comment Désactiver la Copie, Couper et Coller Avec JavaScript/jQuery
Vous pouvez autoriser la sélection de texte, mais empêcher les fonctions de copie et de coupe à l'aide des attributs d’événements oncopy, oncut et onpaste. En ajoutant ces attributs à la boîte de texte de la balise <input>, vous pouvez désactiver les fonctions couper, copier et coller. L'utilisateur a la possibilité d'entrer le champ manuellement avec ces attributs définis.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h2>Copier, couper et coller désactivé</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>Le même effet peut être obtenu à l'aide de la fonction bind() de jQuery en spécifiant les événements cut et copy déclenchés lorsque l'utilisateur coupe ou copie un texte.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h2>Copier et coller désactivés</h2>
<p>Je suis un texte et vous ne pouvez pas me copier ou me couper.</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>Comment Désactiver un Clic Droit Avec JavaScript/jQuery
Pour désactiver le clic droit sur votre page, vous devez ajouter l'événement oncontextmenu et "return false" dans le gestionnaire d'événements. Il bloquera tous les accès au menu contextuel du clic droit de la souris.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h2>Copier et coller désactivés</h2>
<p>Je suis un texte et vous ne pouvez pas me copier ou me couper.</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>Utilisez la fonction bind() de jQuery pour désactiver la fonctionnalité de clic droit. Cette méthode désactive la fonctionnalité de clic droit (menu contextuel) sur un champ de texte et alerte également l'utilisateur avec un message contextuel.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h2>Clic droit désactivé</h2>
<p>Pour cette page, le clic droit est désactivé.</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>