在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.

Answer 1

Kind of a hack, but:

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

Answer 2

Why not use the "input" event?

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

Answer 3

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

Answer 4

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.

Answer 5

No need to bind :

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