Maison  >  Article  >  interface Web  >  Comment détecter et bloquer les combinaisons de touches Ctrl V et Ctrl C en JavaScript ?

Comment détecter et bloquer les combinaisons de touches Ctrl V et Ctrl C en JavaScript ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-10-27 11:49:02941parcourir

How to Detect and Block Ctrl V and Ctrl C Key Combinations in JavaScript?

Détection de Ctrl V et Ctrl C en JavaScript

Pour empêcher les utilisateurs de coller du contenu dans une zone de texte, JavaScript peut être utilisé pour détecter et bloquer certaines combinaisons de clavier.

Une approche courante consiste à utiliser les événements keydown et keyup pour surveiller l'appui et le relâchement de la touche Ctrl (ctrlKey ou cmdKey pour Mac). Lorsque Ctrl est détecté, les appuis ultérieurs sur les touches V (coller) ou C (copier) sont interceptés.

Voici un exemple d'extrait de code :

<code class="javascript">$(document).ready(function() {
    var ctrlDown = false,
        ctrlKey = 17,
        cmdKey = 91,
        vKey = 86,
        cKey = 67;

    $(document).keydown(function(e) {
        if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = true;
    }).keyup(function(e) {
        if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = false;
    });

    $(".no-copy-paste").keydown(function(e) {
        if (ctrlDown &amp;&amp; (e.keyCode == vKey || e.keyCode == cKey)) return false;
    });
    
    // Document Ctrl + C/V 
    $(document).keydown(function(e) {
        if (ctrlDown &amp;&amp; (e.keyCode == cKey)) console.log("Document catch Ctrl+C");
        if (ctrlDown &amp;&amp; (e.keyCode == vKey)) console.log("Document catch Ctrl+V");
    });
});</code>

Dans ce code, les éléments avec le La classe "pas de copier-coller" a Ctrl V et Ctrl C désactivés. Le code enregistre également ces combinaisons de touches lorsque vous appuyez n'importe où dans le document.

Implémentation

Pour implémenter cela dans une zone de texte, HTML et CSS peuvent être utilisés :

<code class="html"><h3>Ctrl+c Ctrl+v disabled</h3>
<textarea class="no-copy-paste"></textarea>
<br><br>
<h3>Ctrl+c Ctrl+v allowed</h3>
<textarea></textarea></code>
<code class="css">.no-copy-paste {
    -webkit-user-select: none;  /* Chrome/Safari */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE/Edge */
    user-select: none;          /* Standard syntax */
}</code>

Cette approche empêche efficacement le texte d'être copié et collé dans des zones de texte protégées.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn