How to detect right mouse click + paste using JavaScript?

Question

Is there a way to detect a right click followed by paste with JavaScript on IE and Firefox ?

Update:

I decided to use Jquery to do it:

$('#controlId').bind('paste', null, function() {
    // code
});

It's not exactly what I was looking (because it gets fired on 'ctrl + v' as well as in 'right click + paste' but I can work around it.

Tested it on Chrome, Firefox 3, IE 7 and IE 6 and it's working

I'm afraid. What are you trying to do ? I think depending on the right click and paste has serious web usability issues. — Guido, Jan 14 '09 at 08:38
I'm confused. Do you mean "detect a right click followed by paste" or "detect a right click, then do a paste"? — Sietse, Jan 14 '09 at 08:41
Sorry about that. I changed the title and added more text to make it easier to understand. — Rismo, Jan 14 '09 at 20:11
@Guido García: I'm using the ajax control toolkit autocomplete extender, the problem is that it doesn't autocomplete when you paste text using the mouse on IE (works on Firefox and using ctrl+v works on both) so I'm trying to catch the event to fire the autocomplete. Does this make sense? — Rismo, Jan 14 '09 at 20:25

oddtwelve · Answer 1 · 2011-11-17T23:34:57.023

79

I like this solution:

$('#txt_field').bind('input propertychange', function() {
   console.log($(this).val());
});

edited Nov 17 '11 at 23:34

answered Nov 17 '11 at 12:22

oddtwelve

987
8
15

Awesome! How did you ever figure this one out? – Serj Sagan Feb 25 '14 at 00:44
2

Just so people know, this fires on cut as well as paste. – numaroth Aug 25 '14 at 21:19
This is awesome solution – Faris Rayhan Apr 10 '18 at 09:37
1

I was curious as to which bind did what, but in the end I only needed "input" to catch keyboard entry, keyboard paste and mouse paste events. – Shaun Nov 07 '18 at 11:48

score 23 · Answer 2 · answered Jan 18 '10 at 22:21

23

$('#controlId').bind('paste', null, function(e) {
    if(!e.keyCode){
       /*
          since no key was down at the time of the event we can assume it was
          from the toolbar or right click menu, and not a ctrl+v
       */
    }
});

answered Jan 18 '10 at 22:21

TabLeft

231
2
2

Quirksmode says this is a pretty solid solution: http://www.quirksmode.org/dom/events/cutcopypaste.html – marksyzm Jun 24 '13 at 16:17

score 9 · Accepted Answer · edited Sep 28 '09 at 13:21

9

With IE you have onpaste

With Mozilla you can look into oninput and

elementReference.addEventListener("DOMCharacterDataModified", function(e){ foo(e);}, false);

There is no easy as pie solution.

Eric

edited Sep 28 '09 at 13:21

Natrium

29,076
15
55
71

answered Jan 14 '09 at 01:58

epascarello

185,306
18
175
214

Can you please provide a full example for both IE and Firefox? Thank you. Also, what about Chrome and Safari? – thedp Dec 23 '09 at 12:48

score 5 · Answer 4 · edited May 23 '17 at 12:26

5

Use setTimeout(), set small timeout till .val() func can get populated.

$(document).on('paste blur keyup', '#controlId', function(event) {
    var element = $(event.target);
    setTimeout(function() {
        var text = $(element).val();
        // do something with text
    }, 100);
});

Source: Catch paste input

edited May 23 '17 at 12:26

Community

1
1

answered Oct 13 '14 at 11:15

Malik Shahzad

5,446
3
36
45

score 0 · Answer 5 · answered Mar 24 '15 at 15:29

I had the same problem in IE8. Chrome was allowing me to recognize a right click paste, but IE8 was not.

I was able to fix the issue with JQUERY using the mouse leave function as described by Aaron, but here is the code:

for IE8:
    $( "#field" ).mouseleave(function() {
                doStuff());
            });

for Chrome:
    $('#field').bind('input',function() {
                doStuff();
            });

score 0 · Answer 6 · answered Aug 04 '15 at 15:30

0

I did the following which only fires on mouseup:

onmouseup="jQuery(this).on('paste',function(event){setTimeout(function(){alert('Paste detected!');},100);});"

answered Aug 04 '15 at 15:30

Bob

55
6

score 0 · Answer 7 · answered Dec 18 '19 at 21:59

0

if you're using vue you can emit and pass pasted value like so:

 <v-text-field 
   @input="$emit('rightclickpaste',$event)"  
 >             
 </v-text-field>

answered Dec 18 '19 at 21:59

Jared

678
8
12

score -1 · Answer 8 · answered Jun 03 '09 at 00:12

A cheap hack (that works) that you can try is:

jQuery's mouseleave function.

I've noticed with IE8 that if you right-click in a text box and then select 'paste', it delays the "mouseleave" event until the paste has finished. So it consistently fires right after the paste! :) Works for me and got me out of trouble perfectly actually.

This is only for an intranet app, I haven't tested in Firefox etc.

Cheers

How to detect right mouse click + paste using JavaScript?

8 Answers8

Linked

Related