Javascript OnPaste

Question

I have this right now:

<input type="text" placeholder="Paste text" onPaste="alert(this.value);">

This does infact work, except, it returns a blank alert window. I don't get any value. Help?

Answer 1

The onpaste event fires before the input's value is changed. You need something such as a setTimeout:

<input type="text" placeholder="Paste text" onPaste="var e=this; setTimeout(function(){alert(e.value);}, 4);">​

I'm storing a reference to this inside a global var as this is not accessible inside the scope of a timeout function which is attached to the window object.

I'm using 4 miliseconds as the Timeout as it's the minimum valid Interval/Timeout in the HTML5 specification. Edit: As noted in the comments, you may also use 0 miliseconds as timeOut which is automatically recalculated to 4. jsPerf tests.

Fiddle

You may as well use a function call inside your onpaste event passing this as a parameter to prevent your HTML mixing with JS too much. :)

And here's a function easier to read and which you can use in multiple inputs:

function pasted(element) {
    setTimeout(function(){
        alert(element.value);
    }, 0); //or 4
}​

Which can be called with simply onPaste="pasted(this)" for any input.

Fiddle