Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript OnPaste

Tags:

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?

like image 243
Jake Avatar asked Jun 10 '12 22:06

Jake


People also ask

What is Onpaste in JS?

The onpaste event occurs when the user pastes some content in an element. Note: Although the onpaste event is supported by all HTML elements, it is not actually possible to paste some content in, for example, a <p> element, UNLESS the element has set contenteditable to "true" (See "More Examples" below).

How do you paste text in Javascript?

Use navigator. clipboard to get access to the clipboard. Use writeText() to copy text into the clipboard. Use readText() to paste the text.


2 Answers

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

like image 172
Fabrício Matté Avatar answered Nov 06 '22 03:11

Fabrício Matté


This is because the onpaste event fires before the content gets pasted into the element (link) so it's not there yet at the time you handle it.

Modern browsers support methods of obtaining clipboard data inside the event handler. Refer to JavaScript get clipboard data on paste event (Cross browser) for cross-browser solution attempts.

Also, you can always work around your issue by simply starting a timer in the event handler function (10ms should be enough) that would check your input value later.

like image 45
Dmitry Pashkevich Avatar answered Nov 06 '22 04:11

Dmitry Pashkevich