How can I detect CTRL-V in JavaScript for IE and firefox

Question

I'm trying to detect when the user presses Ctrl + V in JavaScript.

jQuery(document).on('paste', function() {alert('text pasted!')})

It works well with Chrome (v37). But it does not work with Firefox (v32) and IE (v11), as you can try on this jsfiddle:

http://jsfiddle.net/7N6Xq/410/

Any idea what I'm doing wrong?

EDIT - 2014-09-17 - need the clipboard content.

I cannot just rely on key detection, because I need the clipboard content which is only available through a paste event (there is no clean other way to access it). In this JSFiddle, I get the event and display the text (works on Chrome only)

http://jsfiddle.net/7N6Xq/412/

My final goal is to get an image from the clipboard and directly send it to the server.

Solution 1

This is my JSFIDDLE. It worked well on Chrom & Firefox &IE10 Here is code:

$(document).keydown(function (event) {
    if (event.ctrlKey && event.keyCode == 86) {
        alert("!");
    }
});

Solution 2

You can't just paste on displayed text. You have to create an input area where they can paste, an <input> or a <textarea> or similar. It will inherit the onpaste handler so you don't have to set it directly on the input element, but it won't fire outside of one in most browsers.

See fiddle here: http://jsfiddle.net/Lznvm8x9/

I'm on a Mac, so I can't test IE, but the above works in Firefox, as well as Safari and Opera.

If you want to detect control-V as a key chord independent of the actual paste functionality, you can use keydown/keyup events, but then you hit the cross-platform issues - do you want it to still be control-V on a Mac, where paste is usually command-V, etc.

Solution 3

Use keydown and keyup + codes for keys instead of your actual approach.