CODEWITHSUNDEEP
javascriptjquery
FrankD
FrankD

Reputation: 899

Invoke a function after right click paste in jQuery

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.

Upvotes: 17

Views: 21401

Answers (6)

Muhammad Junaid
Muhammad Junaid

Reputation: 1

Use the Jquery event "input".

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

Upvotes: 0

ehsan_kabiri_33
ehsan_kabiri_33

Reputation: 386

No need to bind :

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

Upvotes: 0

JChen___
JChen___

Reputation: 3711

Why not use the "input" event?

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

Upvotes: 27

Ilia Ross
Ilia Ross

Reputation: 13412

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);

Upvotes: 3

jbabey
jbabey

Reputation: 46657

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.

Upvotes: 0

Jaime Torres
Jaime Torres

Reputation: 10515

Kind of a hack, but:

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

Upvotes: 26

Related Questions