Fire event with right mouse click and Paste

Question

I want to fire an event in a textarea immediately after paste some text inside the textarea. I can do that when Shift+Ins is used; however, I cannot do it when right mouse button and then paste (from the drop down menu) is chosen. Keyup fires after Shift+Ins. None of the rest fires when Paste is chosen after right mouse button clicking... What do I have to do?

<textarea name="message"  id="message"></textarea>

$("#message").on('keyup contextmenu', function(event) { 
     alert("ok");
 });

http://jsfiddle.net/f29vuwoL/7/

Thank you

Answer 1

Most browsers support the input event, which is fired when something is pasted or otherwise added, regardless of how:

$("#message").on('keyup contextmenu input', function(event) { 
  alert("ok");
});

Updated Fiddle

Note that using input is the most general method, firing when the control gets input regardless of how, and so if you hook multiple events (as above), you'll get multiple calls for the same input. For instance, if you hook both keyup and input, on browsers that support input, you'll get two calls. Similarly for paste and input when the user pastes, on browsers that support both.

If you need to support browsers that don't have either input or paste, I'm afraid the unfortunate answer is that you need to poll. Still, polling every (say) 250ms isn't asking the browser to do that much work, and you can feature-detect whether it's necessary:

var message = $("#message");
var events = null;
var previous;
if ('oninput' in message[0]) {
    // Browser supports input event
    events = "input";
} else if ('onpaste' in message[0]) {
    // Browser supports paste event
    events = "paste keyup contextmenu";
}
if (!events) {
    // Ugh, poll and fire our own
    events = "pseudoinput";
    previous = message.val();
    setInterval(function() {
        var current = message.val();
        if (current != previous) {
            previous = current;
            message.trigger(events);
        }
    }, 250);
}
console.log("Using: " + events);
message.on(events, function(e) { 
  console.log("Got event: " + e.type);
});

Updated Fiddle

Answer 2

You should use input event callback. See the demo here

Answer 3

You can use the dedicated paste event:

$("#message").on('paste', function(event) { 
     alert("ok");
 });

Updated jsFiddle

However you might want to check browser support - I don't think jQuery normalizes this event.

If you need IE support, it might be a little more difficult, but it depends on your requirements - does it absolutely need to be a paste action? If not, TJ Crowder's answer is the way to go.

Answer 4

The on input is useful if you want to detect when the contents of a textarea, input:text, input:password or input:search element have changed, because the onchange event on these elements fires when the element loses focus, not immediately after the modification.The oninput event is supported in Internet Explorer from version 9.

 $("#message").on('input propertychange', function() {
       console.log($(this).val());
    });

Fiddle