Invoke a function after right click paste in jQuery

Question

I know we can use bind paste event as below:

$('#id').bind('paste', function(e) { 
    alert('pasting!') 
});

But the problem is, that it will call before the pasted text paste. I want a function to be triggered after the right click -> paste text pasted on the input field, so that I can access the pasted value inside the event handler function.

.change() event also doesn't help. Currently I use .keyup() event, because I need to show the remaining characters count while typing in that input field.

What about the HTML5 `oninput` event listener? – Waleed Khan Aug 27 '12 at 17:44 — Waleed Khan, Aug 27 '12 at 17:44

score 26 · Accepted Answer · answered Aug 27 '12 at 17:44

26

Kind of a hack, but:

$("#id").bind('paste', function(e) {
        var ctl = $(this);
        setTimeout(function() {
            //Do whatever you want to $(ctl) here....
        }, 100);
});

answered Aug 27 '12 at 17:44

Jaime Torres

10,365
1
48
56

This was my intuition, as well. – Charlie G Aug 27 '12 at 17:50
Why the timeout should be `100`, not `50` or `200`? – Oleg Aug 31 '21 at 14:07

score 23 · Answer 2 · answered Jan 21 '15 at 10:58

23

Why not use the "input" event?

$("#id").bind('input', function(e) {
    var $this = $(this);
    console.log($this.val());
});

answered Jan 21 '15 at 10:58

JChen___

3,593
2
20
12

1

i never knew there was on event called `input` :D, this should be the current answer instead of the `timeout` answer – Exlord Jun 24 '15 at 04:30
Upvoted! This should be the accepted answer. The oninput event occurs after the pasting is complete, after any char(s) are added to the input. Inline you can do this – DiscipleMichael Nov 15 '17 at 22:37
That needs to be the accepted answer! I never knew there was `input` event for input elements. This makes many things that much easier! – Lis Sep 18 '19 at 17:06

Ilia Ross · Answer 3 · 2012-09-07T08:24:05.717

This will stop user from any pasting, coping or cutting with the keyboard:

$("#myField").keydown(function(event) {
   var forbiddenKeys = new Array('c', 'x', 'v');
   var keyCode = (event.keyCode) ? event.keyCode : event.which;
   var isCtrl;
   isCtrl = event.ctrlKey

     if (isCtrl) {
       for (i = 0; i < forbiddenKeys.length; i++) {
           if (forbiddenKeys[i] == String.fromCharCode(keyCode).toLowerCase()) {
             return false;
        }
     }
}
return true;
});

This one will do the same for the mouse events:

$("#myField").bind("cut copy paste",function(event) {
   event.preventDefault();
});

Even though the above one will not prevent right clicks, the user will not be able to paste, cut or copy from that field.

To use it after the event, like you wondered on your question, you must use JavaScript Timing Event

setTimeout(function() {
  // your code goes here
}, 10);

score 0 · Answer 4 · edited May 23 '17 at 12:33

I had the same issue, I opted to replicate the paste action through javascript and use that output instead:

var getPostPasteText = function (element, pastedData) {
    // get the highlighted text (if any) from the element
    var selection = getSelection(element);
    var selectionStart = selection.start;
    var selectionEnd = selection.end;

    // figure out what text is to the left and right of the highlighted text (if any)
    var oldText = $(element).val();
    var leftPiece = oldText.substr(0, selectionStart);
    var rightPiece = oldText.substr(selectionEnd, oldText.length);

    // compute what the new value of the element will be after the paste
    // note behavior of paste is to REPLACE any highlighted text
    return leftPiece + pastedData + rightPiece;
};

See IE's document.selection.createRange doesn't include leading or trailing blank lines for source of the getSelection function.

score 0 · Answer 5 · answered Jun 30 '21 at 17:30

0

No need to bind :

$(document).on('keyup input', '#myID', function () {
  //Do something      
});

answered Jun 30 '21 at 17:30

ehsan_kabiri_33

341
6
13

score 0 · Answer 6 · answered Aug 04 '23 at 07:41

0

Use the Jquery event "input".

$('#id').bind('input', function(e) { 
    alert('pasting!') 
});

answered Aug 04 '23 at 07:41

Muhammad Junaid

1
1

Invoke a function after right click paste in jQuery

6 Answers6