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

Question

Comment détecter ctrl + v , ctrl + c en utilisant 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 doit seulement taper le texte dans la zone de texte.

Comment y parvenir ?

Answer 1

J'ai juste fait ça 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érateur... En outre, le code pourrait facilement être étendu pour ajouter des fonctionnalités, plutôt que de les supprimer (comme un presse-papiers 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>

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

Démonstration du 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 Macs ( cmd au lieu de ctrl )

Answer 2

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

Answer 3

Bien que cela puisse être ennuyeux lorsqu'il est utilisé comme une mesure anti-piratage, je peux voir qu'il pourrait y avoir des cas où il 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.ctrlKey plutôt que de vérifier le code de la clé comme sur la plupart des navigateurs sur Mac OS X Ctrl / Alt Les événements "down" et "up" ne sont jamais déclenchés, donc la seule façon de les détecter est d'utiliser la fonction event.ctrlKey dans l'événement e.g. c après le Ctrl est maintenue enfoncée. J'ai également substitué ctrlKey con metaKey pour les Macs.

Limites 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.

• El edit -> copy dans Firefox, par exemple, permet toujours de copier/coller.

• Il n'y a pas non plus de garantie que pour les personnes ayant des claviers différents, les codes des touches copier/coller/couper soient les mêmes (bien que les claviers suivent souvent la même norme que l'anglais), mais la couverture "désactiver toutes les touches de contrôle" signifie que la sélection de tous, etc. sera également désactivée, donc je pense que c'est un compromis qui doit être fait.

Answer 4

Il y a une autre façon de procéder : onpaste , oncopy y oncut Les événements 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 y Ctrl + c s'accompagne de nombreux effets secondaires, et il n'empêche toujours pas les utilisateurs de coller en utilisant la fonction Firefox Edit menu 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 présente encore quelques problèmes mineurs avec cette méthode (il efface le presse-papiers à la place de la fonction couper/copier lorsqu'il empêche le 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.

Answer 5

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

});