jquery - How to detect Ctrl+V, Ctrl+C using JavaScript?

ID : 20285

viewed : 13

Tags : javascriptjqueryhtmljavascript

Top 5 Answer for jquery - How to detect Ctrl+V, Ctrl+C using JavaScript?

vote vote

93

I just did this out of interest. I agree it's not the right thing to do, but I think it should be the op's decision... Also the code could easily be extended to add functionality, rather than take it away (like a more advanced clipboard, or Ctrl+s triggering a server-side save).

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

Also just to clarify, this script requires the jQuery library.

Codepen demo

EDIT: removed 3 redundant lines (involving e.which) thanks to Tim Down's suggestion (see comments)

EDIT: added support for Macs (cmd key instead of ctrl)

vote vote

85

With jquery you can easy detect copy, paste, etc by binding the function:

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

More information here: http://www.mkyong.com/jquery/how-to-detect-copy-paste-and-cut-behavior-with-jquery/

vote vote

80

While it can be annoying when used as an anti-piracy measure, I can see there might be some instances where it'd be legitimate, so:

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 } 

I've used event.ctrlKey rather than checking for the key code as on most browsers on Mac OS X Ctrl/Alt "down" and "up" events are never triggered, so the only way to detect is to use event.ctrlKey in the e.g. c event after the Ctrl key is held down. I've also substituted ctrlKey with metaKey for macs.

Limitations of this method:

  • Opera doesn't allow disabling right click events

  • Drag and drop between browser windows can't be prevented as far as I know.

  • The edit->copy menu item in e.g. Firefox can still allow copy/pasting.

  • There's also no guarantee that for people with different keyboard layouts/locales that copy/paste/cut are the same key codes (though layouts often just follow the same standard as English), but blanket "disable all control keys" mean that select all etc will also be disabled so I think that's a compromise which needs to be made.
vote vote

61

There's another way of doing this: onpaste, oncopy and oncut events can be registered and cancelled in IE, Firefox, Chrome, Safari (with some minor problems), the only major browser that doesn't allow cancelling these events is Opera.

As you can see in my other answer intercepting Ctrl+v and Ctrl+c comes with many side effects, and it still doesn't prevent users from pasting using the 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 still has some minor problems with this method (it clears the clipboard in place of cut/copy when preventing default) but that bug appears to have been fixed in Chrome now.

See also: http://www.quirksmode.org/dom/events/cutcopypaste.html and the associated test page http://www.quirksmode.org/dom/events/tests/cutcopypaste.html for more information.

vote vote

51

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

Top 3 video Explaining jquery - How to detect Ctrl+V, Ctrl+C using JavaScript?

Related QUESTION?