jQuery: how to update a div when pasting in form (like facebook)

Question

I have an input field where a user can paste a link. I would like to have a div appear as soon as the user adds a URL to the input field.

Until now I used .blur and .onfocus, but the div only appears once I click outside the input field after pasting the URL.

It's like on Facebook: as soon as you paste a link it will load a box without reloading the page.

Answer 1

.blur is the opposite of .focus -- it triggers when the specified field loses focus. You need to use something that triggers every time a key is pressed, like .keyup

Note that .change will not work -- it also only fires when the field loses focus

Answer 2

I would scan the textarea's content on keydown and use a regex to look for a "http://"

Answer 3

Since they might paste a URL via mouse or via keyboard, you could try binding to both keyup and mouseup, and check whether a valid URL is present. You might get into trouble, though, if they type a URL out character by character -- it might be a valid URL even before they're actually finished.

Another thing to try, then, would be to bind to mousemove for the entire document, but stop propagation of the event within the input box. That way, you'd trigger as soon as they move away from the box, rather than needing to actually click outside the box.