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

Comment détecter ctrl+ v, ctrl+ en cutilisant Javascript?

J'ai besoin de restreindre le collage dans mes zones de texte, l'utilisateur final ne doit pas copier et coller le contenu, l'utilisateur ne doit taper du texte que dans la zone de texte.

Comment y parvenir?

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

$(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>

Aussi juste pour clarifier, ce script nécessite la bibliothèque jQuery.

Démo Codepen

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

EDIT: prise en charge supplémentaire pour les Mac ( cmdclé au lieu de ctrl)

Avec jquery, vous pouvez facilement détecter les copier, coller, 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/

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

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.ctrlKeyplutôt que de vérifier le code de la clé comme sur la plupart des navigateurs sous Mac OS X Ctrl/ Altles événements "down" et "up" ne sont jamais déclenchés, donc le seul moyen de détecter est d'utiliser event.ctrlKeydans l'événement eg c après la Ctrlclé est maintenu enfoncé. J'ai également remplacé ctrlKeypar metaKeydes 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 pas être empêché pour autant que je sache.

• L' élément de menu edit-> copydans Firefox, par exemple, peut toujours autoriser le copier / coller.

• Il n'y a pas non plus de garantie que pour les personnes avec différentes dispositions de clavier / paramètres régionaux qui copient / collent / coupent les mêmes codes de clé (bien que les dispositions suivent souvent le même standard que l'anglais), mais une couverture "désactiver toutes les touches de contrôle" signifie que tout sélectionner, etc. sera également désactivé, donc je pense que c'est un compromis qui doit être fait.

Il y a une autre façon de le faire: onpaste , oncopyetoncut les événements peuvent être enregistrés et annulés dans IE, Firefox, Chrome, Safari (avec quelques problèmes mineurs), le seul grand navigateur qui ne permet pas l' annulation de ces événements est Opera.

Comme vous pouvez le voir dans mon autre réponse, intercepter Ctrl+ vet Ctrl+ ccomporte de nombreux effets secondaires, et cela n'empêche toujours pas les utilisateurs de coller à l'aide du Editmenu Firefox , 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 (il efface le presse-papiers à la place de couper / copier lors de la prévention 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.

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!');
        }
    });

}); 

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();
});

La désactivation de la sélection de texte dans CSS peut également 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;
}

Si vous utilisez la ctrlKeypropriété, vous n'avez pas besoin de maintenir 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.
      } 
    }

J'ai écrit un plugin jQuery, qui capture les frappes. Il peut être utilisé pour activer l'entrée de script dans plusieurs langues dans des formulaires html sans le système d'exploitation (à l'exception des polices). Ses environ 300 lignes de code, peut-être que vous aimeriez y jeter un œil:

• http://miku.github.com/jquery-retype

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

Vous pouvez utiliser ce code pour faire un clic droit, CTRL+ C, CTRL+ V, CTRL+ Xdétecter et empêcher 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();
    });

au lieu de onkeypress, utilisez onkeydown.

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

Une autre approche (aucun plugin nécessaire) consiste à utiliser simplement la ctrlKeypropriété de l' objet événement qui est passé. Cela indique si a Ctrlété 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 un combo comme ça) .

N'oubliez pas que, même si vous pouvez détecter et bloquer Ctrl+ C/ V, vous pouvez toujours modifier la valeur d'un certain champ.
Le meilleur exemple pour cela est la fonction Inspecter l'élément de Chrome, qui vous permet de modifier la propriété valeur d'un champ.

j'ai déjà votre problème et je l'ai résolu par le code suivant .. qui n'acceptent que les 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 l' Ctrlide.which == 17

Vous pouvez écouter l'événement de pression de touche et arrêter l'événement par défaut (en entrant le texte) s'il correspond aux codes de touches spécifiques

Note importante

J'utilisais e.keyCodependant un moment et j'ai détecté que lorsque j'appuie sur ctrl+ ., cet attribut renvoie un mauvais numéro, 190, alors que le code ascii de .est 46!

Vous devriez donc utiliser à la e.key.toUpperCase().charCodeAt(0)place de e.keyCode.

Il existe des moyens de l'empêcher.

Cependant, l'utilisateur pourra toujours désactiver le javascript ou simplement regarder le code source de la page.

Quelques exemples (nécessitent jQuery)

/**
* Stop every keystroke with ctrl key pressed
*/
$(".textbox").keydown(function(){
    if (event.ctrlKey==true) {
        return false;
    }
});

/**
* Clear all data of clipboard on focus
*/
$(".textbox").focus(function(){
    if ( window.clipboardData ) {
        window.clipboardData.setData('text','');
    }
});

/**
* Block the paste event
*/
$(".textbox").bind('paste',function(e){return false;});

Edit: Comme l'a dit Tim Down, ces fonctions dépendent toutes du navigateur.