JavaScript interdit le collage

JavaScript désactive le collage

Dans la plupart des applications Web, les utilisateurs peuvent utiliser la fonction Coller pour coller du texte, des images et d'autres contenus multimédias du presse-papiers vers une page Web. Bien que cette fonction soit pratique, elle entraîne parfois des risques de sécurité et des problèmes d'expérience utilisateur. Cet article explique comment désactiver le collage à l'aide de JavaScript.

1. Événement Coller

En JavaScript, nous pouvons utiliser l'événement onpaste pour gérer l'opération de collage. Cet événement est déclenché lorsque l'utilisateur colle du contenu dans un champ de texte ou une zone modifiable.

Voici un exemple simple montrant comment utiliser l'événement onpaste.

<input type="text" onpaste="alert('禁止粘贴！'); return false;">

Lorsque l'utilisateur essaie de coller dans la zone de texte, une boîte de dialogue apparaîtra, informant l'utilisateur que l'opération de collage ne peut pas être effectuée.

2. Désactiver le collage

Si nous voulons interdire complètement aux utilisateurs de coller dans le champ de texte ou la zone modifiable, nous pouvons définir la valeur de retour de l'événement onpaste sur false. De cette façon, quelle que soit la méthode activée par l’utilisateur pour les opérations de collage, elle sera interdite.

<textarea onpaste="return false;"></textarea>

Dans cet exemple, nous empêchons l'utilisateur de coller dans le champ de texte. Que l'utilisateur utilise le raccourci Ctrl + V ou clique avec le bouton droit et sélectionne Coller, l'opération de collage sera bloquée.

3. Effacer le contenu collé

Parfois, nous espérons que les utilisateurs pourront coller, mais le contenu collé doit être effacé. Cette exigence se produit généralement dans les scénarios dans lesquels certains types de contenu doivent être filtrés ou dans lesquels le contenu collé doit être traité.

Dans l'exemple suivant, nous montrons comment effacer toutes les balises HTML collées du presse-papiers dans une zone de texte :

<input type="text" onpaste="event.preventDefault(); var text = (event.originalEvent || event).clipboardData.getData('text/plain'); text = text.replace(/<[^>]*>/g, ''); document.execCommand('insertText', false, text);">

Lorsque l'utilisateur colle dans la zone de texte, l'événement onpaste se déclenche et exécute le code JavaScript. Ce code empêche l'opération de collage par défaut à l'aide de event.preventDefault(). Il récupère ensuite le texte brut du presse-papiers et le traite, en supprimant toutes les balises HTML. Enfin, utilisez document.execCommand() pour insérer le texte traité dans la zone de texte.

4. Conclusion

Dans cet article, nous avons présenté comment utiliser JavaScript pour désactiver la fonction de collage et effacer le contenu collé. Ces technologies peuvent nous aider à améliorer la sécurité des applications Web et à améliorer l'expérience utilisateur. Cependant, en utilisation réelle, nous devons évaluer soigneusement l'impact de ces fonctions sur l'application afin d'éviter des problèmes et des difficultés inutiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!