web-dev-qa-db-fra.com

Comment détecter Ctrl + V, Ctrl + C en utilisant JavaScript?

Comment détecter ctrl+v, ctrl+c utiliser Javascript?

Je dois limiter le collage dans mes zones de texte, l'utilisateur final ne doit pas copier et coller le contenu, l'utilisateur ne doit taper que du texte dans textarea.

Comment y parvenir?

javascriptjqueryhtml
153
Ramakrishnan

Je viens de faire cela par intérêt. Je suis d'accord que ce n'est pas la bonne chose à faire, mais je pense que cela devrait être la décision de l'op ... De plus, le code pourrait facilement être étendu pour ajouter des fonctionnalités, plutôt que de le supprimer (comme un presse-papier plus avancé, ou Ctrl+s déclencher une sauvegarde côté serveur).

$(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 && (e.keyCode == vKey || e.keyCode == cKey)) return false;
    });
    
    // Document Ctrl + C/V 
    $(document).keydown(function(e) {
        if (ctrlDown && (e.keyCode == cKey)) console.log("Document catch Ctrl+C");
        if (ctrlDown && (e.keyCode == vKey)) console.log("Document catch Ctrl+V");
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Ctrl+c Ctrl+v disabled</h3>
<textarea class="no-copy-paste"></textarea>
<br><br>
<h3>Ctrl+c Ctrl+v allowed</h3>
<textarea></textarea>

Également pour clarifier, ce script nécessite la bibliothèque jQuery.

démo de Codepen

EDIT: suppression de 3 lignes redondantes (impliquant e.which) grâce à la suggestion de Tim Down (voir commentaires)

EDIT: ajout du support pour les Mac (touche cmd au lieu de ctrl)

168
jackocnr

Avec jQuery, vous pouvez facilement détecter les copies, colles, etc. en liant la fonction:

$("#textA").bind('copy', function() {
    $('span').text('copy behaviour detected!')
}); 
$("#textA").bind('paste', function() {
    $('span').text('paste behaviour detected!')
}); 
$("#textA").bind('cut', function() {
    $('span').text('cut behaviour detected!')
});

Plus d'informations ici: http://www.mkyong.com/jquery/how-to-detect-copy-paste-and-cut-behavior-with-jquery/

50
Chris Andersson

Bien que cela puisse être agaçant quand il est utilisé comme mesure anti-piratage, je peux voir qu'il pourrait y avoir des cas où cela serait légitime, alors:

function disableCopyPaste(Elm) {
    // Disable cut/copy/paste key events
    Elm.onkeydown = interceptKeys

    // Disable right click events
    Elm.oncontextmenu = function() {
        return false
    }
}

function interceptKeys(evt) {
    evt = evt||window.event // IE support
    var c = evt.keyCode
    var ctrlDown = evt.ctrlKey||evt.metaKey // Mac support

    // Check for Alt+Gr (http://en.wikipedia.org/wiki/AltGr_key)
    if (ctrlDown && evt.altKey) return true

    // Check for ctrl+c, v and x
    else if (ctrlDown && c==67) return false // c
    else if (ctrlDown && c==86) return false // v
    else if (ctrlDown && c==88) return false // x

    // Otherwise allow
    return true
}

J'ai utilisé event.ctrlKey plutôt que de rechercher le code de clé comme sur la plupart des navigateurs sous Mac OS X Ctrl/Alt Les événements "down" et "up" ne sont jamais déclenchés, la seule façon de détecter consiste à utiliser event.ctrlKey dans le fichier exemple. c événement après le Ctrl la touche est maintenue enfoncée. J'ai également substitué ctrlKey par metaKey pour macs.

Limitations de cette méthode:

  • Opera ne permet pas de désactiver les événements de clic droit
  • Le glisser-déposer entre les fenêtres du navigateur ne peut être empêché pour autant que je sache.
  • L'élément de menu edit-> copy dans par exemple Firefox peut toujours autoriser le copier/coller.
  • Il n’existe pas non plus de garantie que, pour les personnes disposant de configurations de clavier/paramètres régionaux différents, les fonctions de copier/coller/couper soient les mêmes codes de clé (bien que les dispositions suivent souvent les mêmes normes que l’anglais), mais la fonction "désactiver toutes les touches de contrôle" signifie que vous devez sélectionner tous les paramètres, etc. sera également désactivé, je pense donc que c'est un compromis qui doit être fait.
38
cryo

Il existe un autre moyen de procéder: _, les événements onpaste, oncopy et oncut peuvent être enregistrés et annulés dans IE, Firefox, Chrome, Safari. (avec quelques problèmes mineurs), le seul navigateur majeur qui ne permet pas d'annuler ces événements est Opera.

Comme vous pouvez le voir dans mon autre réponse, intercepter Ctrl+v et Ctrl+c vient avec beaucoup d'effets secondaires, et il n'empêche pas les utilisateurs de coller en utilisant le menu Firefox Edit etc.

function disable_cutcopypaste(e) {
    var fn = function(evt) {
        // IE-specific lines
        evt = evt||window.event
        evt.returnValue = false

        // Other browser support
        if (evt.preventDefault) 
            evt.preventDefault()
        return false
    }
    e.onbeforepaste = e.onbeforecopy = e.onbeforecut = fn
    e.onpaste = e.oncopy = e.oncut = fn
}

Safari a encore quelques problèmes mineurs avec cette méthode (elle efface le presse-papiers au lieu de couper/copier en empêchant l'utilisation par défaut), mais ce bogue semble avoir été corrigé dans Chrome maintenant.

Voir aussi: http://www.quirksmode.org/dom/events/cutcopypaste.html et la page de test associée http: //www.quirksmode.org/dom/events/tests/cutcopypaste.html pour plus d'informations.

12
cryo

Démo en direct: http://jsfiddle.net/abdennour/ba54W/

$(document).ready(function() {

    $("#textA").bind({
        copy : function(){
            $('span').text('copy behaviour detected!');
        },
        paste : function(){
            $('span').text('paste behaviour detected!');
        },
        cut : function(){
            $('span').text('cut behaviour detected!');
        }
    });

});
9
Abdennour TOUMI

Solution courte pour empêcher l'utilisateur d'utiliser le menu contextuel, copier et couper dans jQuery:

jQuery(document).bind("cut copy contextmenu",function(e){
    e.preventDefault();
});

Désactiver également la sélection de texte en CSS peut s'avérer utile:

.noselect {  
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
}
8
jendarybak

au lieu de onkeypress, utilisez onkeydown.

<input type="text" onkeydown="if(event.ctrlKey && event.keyCode==86){return false;}" name="txt">
3
atiruz

J'ai écrit un plugin jQuery, qui intercepte des frappes au clavier. Il peut être utilisé pour permettre la saisie de scripts multilingues dans des formulaires HTML sans le système d'exploitation (à l'exception des polices). Ses environ 300 lignes de code, peut-être que vous aimez jeter un oeil:

En règle générale, soyez prudent avec ce genre de modifications. J'ai écrit le plugin pour un client car d'autres solutions n'étaient pas disponibles.

3
miku

Vous pouvez utiliser ce code pour rightclick, CTRL+C, CTRL+V, CTRL+X détecter et prévenir leur action

$(document).bind('copy', function(e) {
        alert('Copy is not allowed !!!');
        e.preventDefault();
    }); 
    $(document).bind('paste', function() {
        alert('Paste is not allowed !!!');
        e.preventDefault();
    }); 
    $(document).bind('cut', function() {
        alert('Cut  is not allowed !!!');
        e.preventDefault();
    });
    $(document).bind('contextmenu', function(e) {
        alert('Right Click  is not allowed !!!');
        e.preventDefault();
    });
2
Varun Naharia

Une autre approche (aucun plugin nécessaire) consiste à utiliser simplement la propriété ctrlKey de l'objet événement à transmettre. Elle indique si Ctrl était pressé au moment de l'événement, comme ceci:

$(document).keypress("c",function(e) {
  if(e.ctrlKey)
    alert("Ctrl+C was pressed!!");
});

Voir aussi jquery: keypress, ctrl + c (ou une combinaison similaire) .

1
Abu Ghufran

Si vous utilisez la propriété ctrlKey, vous n'avez pas besoin de conserver l'état.

   $(document).keydown(function(event) {
      // Ctrl+C or Cmd+C pressed?
      if ((event.ctrlKey || event.metaKey) && event.keyCode == 67) {
         // Do stuff.
      }

      // Ctrl+V or Cmd+V pressed?
      if ((event.ctrlKey || event.metaKey) && event.keyCode == 86) {
         // Do stuff.
      }

      // Ctrl+X or Cmd+X pressed?
      if ((event.ctrlKey || event.metaKey) && event.keyCode == 88) {
         // Do stuff.
      } 
    }
0
Crashalot

j'ai déjà votre problème et je l'ai résolu par le code suivant .. qui n'accepte que des nombres

$('#<%= mobileTextBox.ClientID %>').keydown(function(e) {
            ///// e.which Values
            // 8  : BackSpace , 46 : Delete , 37 : Left , 39 : Rigth , 144: Num Lock 
            if (e.which != 8 && e.which != 46 && e.which != 37 && e.which != 39 && e.which != 144
                && (e.which < 96 || e.which > 105 )) {
                return false;
            }
        });

vous pouvez détecter Ctrl id e.which == 17

0
Amr Badawy

N'oubliez pas cela, alors que vous pourrez peut-être détecter et bloquer Ctrl+C/V, vous pouvez toujours modifier la valeur d’un certain champ.
Le meilleur exemple à cet égard est la fonction Inspect Element de Chrome, qui vous permet de modifier la propriété value d'un champ.

0
BlueCacti

Note importante

J'utilisais e.keyCode pendant un moment et j'ai détecté que lorsque j'appuyais sur ctrl + ., Cet attribut retourne un nombre incorrect, 190, alors que le code ASCII de . est 46!

Vous devez donc utiliser e.key.toUpperCase().charCodeAt(0) au lieu de e.keyCode.

0
Amir Forsati

Vous pouvez écouter l'événement de frappe et arrêter l'événement par défaut (saisir le texte) s'il correspond aux codes de clé spécifiques.

0
baloo