Wie erkennt und blockiert man die Tastenkombinationen Strg V und Strg C in JavaScript?

Strg V und Strg C in JavaScript erkennen

Um zu verhindern, dass Benutzer Inhalte in einen Textbereich einfügen, kann JavaScript zum Erkennen und Blockieren verwendet werden bestimmte Tastaturkombinationen.

Ein gängiger Ansatz besteht darin, die Keydown- und Keyup-Ereignisse zu verwenden, um das Drücken und Loslassen der Strg-Taste (Strg-Taste oder cmd-Taste für Mac) zu überwachen. Wenn Strg erkannt wird, werden nachfolgende Betätigungen der Tasten V (Einfügen) oder C (Kopieren) abgefangen.

Hier ist ein Beispiel-Codeausschnitt:

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

In diesem Code werden Elemente mit dem In der Klasse „no-copy-paste“ sind Strg V und Strg C deaktiviert. Der Code protokolliert diese Tastenkombinationen auch, wenn sie irgendwo im Dokument gedrückt werden.

Implementierung

Um dies in einem Textbereich zu implementieren, können HTML und CSS verwendet werden:

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

Dieser Ansatz verhindert effektiv, dass Text kopiert und in geschützte Textbereiche eingefügt wird.

Das obige ist der detaillierte Inhalt vonWie erkennt und blockiert man die Tastenkombinationen Strg V und Strg C in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!