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.

You should be able to get your answers from the combination of these two threads: http://stackoverflow.com/questions/10671822/jquery-handling-key-combinations (detecting the "Ctrl" key) & http://stackoverflow.com/questions/10655202/detect-multiple-keys-on-single-keypress-event-on-jquery (detecting key combinations) — talemyn, Sep 16 '14 at 15:40
[mouse trap](http://craig.is/killing/mice) works well, if you just want to use a small library. — royhowie, Sep 16 '14 at 16:35

Todd Mark · Answer 1 · 2014-09-16T15:50:19.520

7

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

edited Sep 16 '14 at 15:50

answered Sep 16 '14 at 15:42

Todd Mark

1,847
13
25

But it does not give you the pasted content through the event. The question should be formulated differently, by displaying the clipboard text in the alert. – John Rizzo Sep 17 '14 at 06:55
@JohnRizzo Soryy, I can't follow you. Do you mean is there a different between the event `paste` and the event `keydown` ? – Todd Mark Sep 17 '14 at 07:13
Yes. For security reasons, it's not possible to initiate the reading of the user's clipboard from JavaScript. The only thing we can to is to wait for the user to initiate a paste event (for example with Ctrl + V) and access the clipboard through that event. – John Rizzo Sep 18 '14 at 11:44

Mark Reed · Answer 2 · 2014-09-16T15:43:08.240

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.

ROMANIA_engineer · Answer 3 · 2014-09-17T08:40:58.713

2

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

edited Sep 17 '14 at 08:40

answered Sep 16 '14 at 15:41

ROMANIA_engineer

54,432
29
203
199

But it does not give you the pasted content through the event. The question should be formulated differently, by displaying the clipboard text in the alert. – John Rizzo Sep 17 '14 at 06:54

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

3 Answers3