Wie erkennt man Strg + V, Strg + C mit JavaScript?

173

Wie erkennt man ctrl+ v, ctrl+ cmit Javascript?

Ich muss das Einfügen in meine Textbereiche einschränken. Der Endbenutzer sollte den Inhalt nicht kopieren und einfügen. Der Benutzer sollte nur Text in den Textbereich eingeben.

Wie erreicht man das?

Ramakrishnan
quelle
3
Was ist der Zweck davon? Die einzigen zwei legitimen Szenarien, an die ich denken kann, sind Passwortfelder (aus denen Sie sowieso nicht kopieren können) und ein Tippgeschwindigkeitstest. Ich bin sicher, Sie können verdächtig schnelles Tippen erkennen.
Paul Butcher
9
@Paul Butcher, @Propeng: Es gibt Szenarien, in denen Sie dies benötigen. Sehr einfaches Beispiel: Eine Seite zum Erlernen von Fremdsprachen. Der Lerneffekt wird verbessert, wenn Sie die Wörter von Hand eingeben, anstatt sie zu kopieren und einzufügen.
back2dos
2
Eine andere legitime Situation könnte sein, dass eine doppelte Eingabe erforderlich ist, um Fehler zu erkennen (z. B. geben Sie Ihre E-Mail zweimal ein, damit wir wissen, dass sie keinen Tippfehler enthält). Ein solcher Benutzer kann jedoch eine Liste zufällig generierter E-Mail-Adressen (z. B. Sneakemail) führen und diese aus Gründen der Genauigkeit wahrscheinlich einfügen.
Paul Butcher
40
@Paul Butcher - das ist überhaupt keine legitime Situation, ich hasse Websites, die das tun, und ich kopiere / füge immer meine (lange) E-Mail-Adresse von einer Eingabe zur anderen ein. Das Unterbrechen des Kopierens / Einfügens ist ein großes Usability-Problem. Es stört den Benutzer wirklich, weil es für sein mentales Modell so grundlegend ist, dass sie erwarten, dass es "einfach funktioniert". Es ist, als hättest du versucht, eine Tür zu ziehen, und sie schwang von dir weg und nicht auf dich zu!
EMP
4
Wenn eine solche Kopie nicht in eine Seite eingefügt werden darf, füge ich den Text an einer anderen Stelle ein (ich verwende die URL-Leiste) und dann Strg + A (wähle den gerade in die URL eingefügten Text aus), ziehe und lege den Text ab Feld in der Suche, in dem das Einfügen deaktiviert ist. Ich denke, das ist bis heute nicht vermeidbar.
Janakiram

Antworten:

180

Ich habe das nur aus Interesse gemacht. Ich bin damit einverstanden, dass es nicht das Richtige ist, aber ich denke, es sollte die Entscheidung des OP sein ... Auch der Code könnte leicht erweitert werden, um Funktionen hinzuzufügen, anstatt ihn wegzunehmen (wie eine erweiterte Zwischenablage oder Ctrl+ das sAuslösen eines Servers) -Seite speichern).

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

Zur Verdeutlichung benötigt dieses Skript auch die jQuery-Bibliothek.

Codepen-Demo

BEARBEITEN: 3 redundante Zeilen (mit e.which) wurden entfernt, dank Tim Downs Vorschlag (siehe Kommentare)

BEARBEITEN: Unterstützung für Macs hinzugefügt ( cmdSchlüssel statt ctrl)

jackocnr
quelle
4
Warum die keydownund keyupHandler auf document? Sie können im $(".no-copy-paste").keydownHandler nach der Strg-Taste suchen. Außerdem ist das e.keyCode || e.whichBit nicht erforderlich : Funktioniert e.keyCodein allen Browsern, e.whichin denen es funktioniert, und e.whichwird daher niemals verwendet. Vielleicht haben Sie darüber nachgedacht, wie Sie einen Zeichencode aus einem keypressEreignis erhalten? Schließlich wird dies nichts gegen Pasten aus dem Kontext oder das Bearbeiten von Menüs tun, aber ich nehme an, das OP hat nicht direkt danach gefragt.
Tim Down
@Tim: Strg-Tastenhandler für Dokumente müssen allgemein gehalten werden, da sie möglicherweise nicht möchten, dass die Variable ctrlDown ausschließlich mit den Eingaben ohne Kopieren und Einfügen verknüpft wird. Das ist vielleicht OTT. Vielen Dank für den e.which-Tipp - ich habe seitdem eine halbe Stunde damit verbracht, die verschiedenen Anwendungsfälle von e.keyCode und e.which mit keydown () und keypress () zu untersuchen, und was für ein Durcheinander (besonders in Firefox)!
Jackocnr
1
jackocnr: Ich empfehle Jan Wolters Artikel zur Behandlung von JavaScript-Schlüsseln: unixpapa.com/js/key.html Ich habe ihn viele Male als Referenz verwendet und keinen Fehler gefunden.
Tim Down
3
Kumpel! Vielen Dank! Dies ist genau das, was ich brauchte, damit Benutzer ein "Element" (Kalendereintrag) in einer Web-App auswählen können, die ich schreibe. Drücken Sie Strg + C, um es zu "kopieren", und dann Strg + V, um es einzufügen, alles ohne tatsächlich mit der allmächtigen gesegneten Zwischenablage interagieren. Strg + C Ich erinnere mich, worauf sie geklickt haben. Strg + V Ich dupliziere es, jeder gewinnt.
Dan F
2
Ich bin kein Experte oder so, aber ich denke, es wäre wahrscheinlich besser, zu testen e.metaKeyoder zu sein e.ctrlKey, trueanstatt den Schlüsseln Zahlenwerte zuzuweisen und diese zu testen.
Sluther
52

Mit jquery können Sie das Kopieren, Einfügen usw. leicht erkennen, indem Sie die Funktion binden:

$("#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!')
});

Weitere Informationen hier: http://www.mkyong.com/jquery/how-to-detect-copy-paste-and-cut-behavior-with-jquery/

Chris Andersson
quelle
1
Leider wird diese Methode nur auf Firefox
ausgelöst,
44

Es kann zwar ärgerlich sein, wenn es als Maßnahme gegen Piraterie eingesetzt wird, aber ich kann sehen, dass es einige Fälle gibt, in denen es legitim wäre, also:

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
}

Ich habe verwendet, event.ctrlKeyanstatt nach dem Schlüsselcode zu suchen, da in den meisten Browsern unter Mac OS X Ctrl/ Alt"down" - und "up" -Ereignisse niemals ausgelöst werden. Die einzige Möglichkeit, dies zu erkennen, besteht darin, event.ctrlKeydas Ereignis "eg c" nach dem CtrlSchlüssel zu verwenden niedergehalten. Ich habe auch substituiert ctrlKeymit metaKeyfür macs.

Einschränkungen dieser Methode:

  • Opera erlaubt nicht das Deaktivieren von Rechtsklickereignissen

  • Drag & Drop zwischen Browserfenstern kann meines Wissens nicht verhindert werden.

  • Der Menüpunkt edit-> copyin z. B. Firefox kann weiterhin das Kopieren / Einfügen ermöglichen.

  • Es gibt auch keine Garantie dafür, dass für Personen mit unterschiedlichen Tastaturlayouts / Gebietsschemas, die kopieren / einfügen / ausschneiden, dieselben Tastencodes verwendet werden (obwohl Layouts häufig nur dem gleichen Standard wie Englisch entsprechen), aber die pauschale "Alle Steuertasten deaktivieren" bedeutet, dass alle usw. Ausgewählt werden wird auch deaktiviert sein, daher denke ich, dass dies ein Kompromiss ist, der gemacht werden muss.
Kryo
quelle
14

Es gibt einen anderen Weg , dies zu tun: onpaste , oncopyund oncutEreignisse registriert und in IE, Firefox, Chrome, Safari (mit einigen kleineren Problemen), der einzige große Browser gelöscht werden , die nicht erlaubt , diese Ereignisse Cancelling Opera ist.

Wie Sie in meiner anderen Antwort sehen können, hat das Abfangen von Ctrl+ vund Ctrl+ cviele Nebenwirkungen, und es hindert Benutzer immer noch nicht daran, das Firefox- EditMenü usw. einzufügen.

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 hat immer noch einige kleinere Probleme mit dieser Methode (es löscht die Zwischenablage anstelle von Ausschneiden / Kopieren, wenn die Standardeinstellung verhindert wird), aber dieser Fehler scheint jetzt in Chrome behoben worden zu sein.

Weitere Informationen finden Sie auch unter: http://www.quirksmode.org/dom/events/cutcopypaste.html und auf der zugehörigen Testseite http://www.quirksmode.org/dom/events/tests/cutcopypaste.html .

Kryo
quelle
9

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

}); 
Abdennour TOUMI
quelle
8

Kurze Lösung, um zu verhindern, dass Benutzer das Kontextmenü verwenden, in jQuery kopieren und ausschneiden:

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

Auch das Deaktivieren der Textauswahl in CSS kann nützlich sein:

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

Wenn Sie die ctrlKeyEigenschaft verwenden, müssen Sie den Status nicht beibehalten.

   $(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.
      } 
    }
Crashalot
quelle
DAS ist die richtige Antwort! Das Ereignis hat die Eigenschaft ctrlKey = true, wenn eine Taste damit gedrückt wurde. Wir brauchen keine zusätzlichen Veranstaltungen.
JanBrus
3

Ich habe ein jQuery-Plugin geschrieben, das Tastenanschläge abfängt. Es kann verwendet werden, um die Eingabe mehrerer Skriptskripte in HTML-Formularen ohne das Betriebssystem (mit Ausnahme der Schriftarten) zu aktivieren. Es sind ungefähr 300 Codezeilen, vielleicht möchten Sie einen Blick darauf werfen:

Seien Sie im Allgemeinen vorsichtig mit solchen Änderungen. Ich habe das Plugin für einen Client geschrieben, weil andere Lösungen nicht verfügbar waren.

miku
quelle
3

Sie können diesen Code verwenden, um mit der rechten Maustaste zu klicken, CTRL+ C, CTRL+ V, CTRL+ Xihre Aktion zu erkennen und zu verhindern

$(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();
    });
Varun Naharia
quelle
3

Verwenden Sie anstelle von onkeypress onkeydown.

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

Vergessen Sie nicht, dass Sie zwar Ctrl+ C/ erkennen und blockieren Vkönnen, aber dennoch den Wert eines bestimmten Felds ändern können.
Das beste Beispiel hierfür ist die Inspect Element-Funktion von Chrome, mit der Sie die value-Eigenschaft eines Felds ändern können.

BlueCacti
quelle
0

Ich habe bereits Ihr Problem und ich habe es durch den folgenden Code gelöst .. die nur Zahlen akzeptieren

$('#<%= 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;
            }
        });

Sie können CtrlID erkennene.which == 17

Amr Badawy
quelle
-1

Sie können das Tastendruckereignis abhören und das Standardereignis (Eingabe des Textes) anhalten, wenn es mit den spezifischen Tastencodes übereinstimmt

baloo
quelle
-1

Wichtige Notiz

Ich habe es e.keyCodeeine Weile benutzt und festgestellt, dass dieses Attribut beim Drücken von ctrl+ .eine falsche Zahl 190 zurückgibt, während der ASCII-Code .46 lautet!

Also solltest du e.key.toUpperCase().charCodeAt(0)statt verwenden e.keyCode.

Amir Fo
quelle
-4

Es gibt einige Möglichkeiten, dies zu verhindern.

Der Benutzer kann jedoch immer das Javascript deaktivieren oder nur den Quellcode der Seite anzeigen.

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

Bearbeiten: Wie Tim Down sagte, sind diese Funktionen alle Browser-abhängig.

Gustavo Cardoso
quelle
2
Dies hat eine Reihe von Problemen: Erstens funktioniert es nicht in Browsern ohne pasteEreignis, das alle Versionen von Firefox vor Version 3 enthält. Zweitens window.clipboardDataist es nur IE und ich glaube, es ist jetzt standardmäßig im IE deaktiviert . Drittens ist das Deaktivieren aller keydownEreignisse, bei denen die Strg-Taste gedrückt wird, übermäßig: Sie verhindern nützliche Tastenkombinationen wie Strg-A (alle auswählen) und Strg-Z (rückgängig machen). Viertens, wie von anderen erwähnt, ist dies eine wirklich schlechte Sache.
Tim Down
Sie haben Recht damit, dass dies nicht bei jedem Browser funktioniert. Niemand Der Strg-Block ist in der Tat nervig. Es war einmal praktisch, wenn ein Kunde das Feld "Bestätigungs-E-Mail und Passwort" blockieren wollte.
Gustavo Cardoso