jquery - Hur man upptäcker Ctrl+V, Ctrl+C med JavaScript?

Hur man upptäcker Ctrl+V, Ctrl+C med JavaScript?

Jag behöver begränsa inklistring i mina textfält, slutanvändaren ska inte kopiera och klistra in innehållet, användaren ska endast skriva text i textfältet.

Hur kan jag uppnå detta?

Svar #1

Jag gjorde det här bara av intresse. Jag håller med om att det inte är rätt att göra, men jag tycker att det borde vara upp till den som startade tråden att bestämma... Dessutom skulle koden enkelt kunna utökas för att lägga till funktionalitet, istället för att ta bort den (som ett mer avancerat urklipp, eller Ctrl+S som triggar en server-sida-spara).

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

Bara för att förtydliga, detta skript kräver jQuery-biblioteket.

Codepen-demo

REDIGERA: tog bort 3 överflödiga rader (som involverar e.which) tack vare Tim Downs förslag (se kommentarer)

REDIGERA: lagt till stöd för Macar (CMD-tangenten istället för Ctrl)

Svar #2

Med jQuery kan du enkelt upptäcka kopiering, klistra in, etc. genom att binda funktionen:

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

Mer information här: http://www.mkyong.com/jquery/how-to-detect-copy-paste-and-cut-behavior-with-jquery/

Svar #3

Även om det kan vara irriterande när det används som en åtgärd mot piratkopiering, kan jag se att det kan finnas vissa situationer där det skulle vara legitimt, så:

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
}

Jag har använt event.ctrlKey istället för att kontrollera för nyckelkoden eftersom på de flesta webbläsare på Mac OS X triggas aldrig Ctrl/Alt "ner"- och "upp"-händelser, så det enda sättet att upptäcka är att använda event.ctrlKey i t.ex. c-händelsen efter att Ctrl-tangenten hålls ned. Jag har också ersatt ctrlKey med metaKey för Mac.

Begränsningar av denna metod:

Opera tillåter inte att högerklickshändelser inaktiveras
Dra och släpp mellan webbläsarfönster kan inte förhindras såvitt jag vet.
Menyalternativet redigera->kopiera i t.ex. Firefox kan fortfarande tillåta kopiering/klistring.
Det finns heller ingen garanti för att för personer med olika tangentbordslayouter/lokaler att kopiera/klippa/klistra har samma tangentkoder (även om layouter ofta bara följer samma standard som engelska), men att generellt "inaktivera alla kontrolltangenter" innebär att välj alla etc. också kommer att inaktiveras, så jag tror att det är ett kompromiss som måste göras.

Svar #4

Om du använder egenskapen ctrlKey behöver du inte upprätthålla tillstånd.

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

Svar #5

Det finns ett annat sätt att göra detta: onpaste, oncopy och oncut händelser kan registreras och avbrytas i IE, Firefox, Chrome, Safari (med några mindre problem), den enda stora webbläsaren som inte tillåter att dessa händelser avbryts är Opera.

Som du kan se i mitt andra svar medför det många bieffekter att avlyssna Ctrl+V och Ctrl+C, och det förhindrar fortfarande inte användare från att klistra in via Firefoxs Edit-meny osv.

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 har fortfarande några mindre problem med denna metod (det rensar urklipp när man försöker använda klipp/ kopiera när default förhindras), men den buggen verkar nu ha blivit åtgärdad i Chrome.