Updating with jQuery Paste event

I'm having an issue with binding the paste event to a text input in jQuery. The event is fired when the user pastes but in the callback $(this).val(); returns the old value, not the new one that was pasted in. I was able to hack it in Chrome but not in Firefox.

The functionality I'm going for is like when you paste a URL into Facebook's status box and it instantly generates a preview of that URL.

I believe the issue is that the paste event callback is getting called before the value of the textbox is updated. But I could be wrong so if anyone has some insight as to why this is happening I'm all ears.

I've made a JSFiddle to illustrate the issue here: http://jsfid开发者_如何学编程dle.net/ybqPp/1/

Any and all help is appreciated.

Thats because in your fiddle, you are getting the value of the textbox to which the event onpaste is bound to.

IMHO, there is no direct way and you may also won't like the hack. So its a lot better to forget it :)

MDN notes on element.onpaste,

There is currently no DOM-only way to obtain the text being pasted; you'll have to use an nsIClipboard to get that information.

Check this out: JavaScript get clipboard data on paste event (Cross browser)

Firefox restricts your access to clipboardData, which means unlike in Webkit (Chromium) or IE, in Firefox you cannot do window.clipboardData.getData("text") or event.clipboardData.getData("text").

Also note that in IE9 (depending on the security settings), users will get permissions bar saying your website is trying to access clipboard.

I know it is silly, here's the word from the horses' mouth - http://support.mozilla.com/en-US/kb/Granting%20JavaScript%20access%20to%20the%20clipboard