jquery interdit le collage par clic droit

Avec le développement rapide des applications Internet et des sites Web, la technologie frontale innove et s'améliore constamment. Parmi eux, jQuery est une bibliothèque JavaScript largement utilisée, principalement utilisée pour les opérations DOM et le traitement des événements. Ici, nous allons apprendre comment désactiver la fonctionnalité de collage par clic droit dans un projet Web à l'aide de jQuery.

Tout d’abord, comprenons ce qu’est le collage par clic droit. Lorsque l'utilisateur clique avec le bouton droit sur la zone de saisie de la page Web et sélectionne l'option "Coller", le contenu stocké dans la table de saisie sera automatiquement copié dans la zone de saisie. Cependant, il existe des circonstances dans lesquelles nous pouvons être amenés à interdire ce comportement, par exemple pour empêcher les utilisateurs de copier des informations sensibles provenant d'autres sites sur notre site. À l’heure actuelle, nous devons implémenter la fonction de désactivation du collage par clic droit dans le code frontal.

La méthode pour désactiver le collage par clic droit à l'aide de jQuery est très simple. Il vous suffit de lier un gestionnaire d'événement de menu contextuel une fois le document chargé et de désactiver l'opération de collage par défaut dans l'événement. Voici la méthode d'implémentation spécifique :

$(document).ready(function() {
  $('input[type="text"]').on('contextmenu', function() {
    return false;
  });
});

Dans le code ci-dessus, nous utilisons la méthode ready() de jQuery pour nous assurer que le DOM est entièrement chargé avant d'exécuter le script. Ensuite, nous sélectionnons toutes les zones de saisie de type "texte" et leur lions les gestionnaires d'événements du menu contextuel. Lorsque l'utilisateur clique avec le bouton droit sur la zone de saisie, l'événement sera déclenché et la fonction de rappel avec une valeur de retour false sera exécutée, de sorte que l'opération de collage par défaut puisse être désactivée.

Le code ci-dessus ne peut désactiver le collage qu'avec le clic droit. Si l'utilisateur effectue l'opération de collage via les touches de raccourci, il sera toujours valide. Afin de désactiver les opérations de collage par d'autres moyens, nous pouvons ajouter du code pour désactiver l'opération de collage dans les événements keydown et keyup de la zone de saisie. L'implémentation spécifique est la suivante :

$(document).ready(function() {
  $('input[type="text"]').on('contextmenu', function() {
    return false;
  }).on('keydown', function(event) {
    // 禁用 Command + V (Mac) 和 Ctrl + V (Windows) 快捷键
    if (event.keyCode === 86 && (event.metaKey || event.ctrlKey)) {
      return false;
    }
  }).on('keyup', function(event) {
    // 禁用 Shift + Insert 快捷键
    if (event.keyCode === 45 && event.shiftKey) {
      return false;
    }
  });
});

Dans le code ci-dessus, en plus de lier l'événement contextmenu, nous lions également les événements keydown et keyup à la zone de saisie. Dans l'événement keydown, nous désactivons les raccourcis Command + V sur Mac et Ctrl + V sur Windows en jugeant les propriétés keyCode et metaKey/CtrlKey de l'événement clavier. Dans l'événement keyup, nous avons désactivé la touche de raccourci Shift + Insert en jugeant les propriétés keyCode et shiftKey.

De cette façon, nous avons utilisé avec succès jQuery pour implémenter la fonction de désactivation du collage par clic droit. Lorsque l'utilisateur tente de coller, le contenu original dans la zone de saisie sera conservé et le contenu du presse-papier ne sera pas automatiquement copié dans la zone de saisie.

Enfin, il convient de noter que, puisque la désactivation du collage par clic droit peut affecter l'expérience utilisateur, nous devons utiliser cette fonction lorsque cela est nécessaire pour éviter de restreindre excessivement les opérations de l'utilisateur.

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!