Question

What’s the best way of validating an HTML text input as it’s typed? All ways I know of doing it has some drawbacks:

1. Using $.keypress you only have access to the input’s old value, not the new one. Also, some events (like cutting/pasting using the mouse) won’t be detected.

2. Using $.change only works when the input loses focus.

3. This question proposes a solution, where you use polling to watch for property changes. In principle, it’s possible to validate the new value in the callback, then revert to the old one if invalid. However, besides requiring polling, I’m not sure it’s free from race conditions.

4. This article suggests using browser specific features when present, falling back to polling if none is available. Looks like the best approach so far.

5. [Update] as pointed in the answers, $.keyup give access to the value after update. However, not only it doesn’t work for mouse cut/paste, but also fails if you press and hold a key, only releasing after a lot has been entered. Or, if combining keydown and keyup to save/restore the old value, it breaks if the user types too fast.

None of the solutions above are error free or really safe cross-browsers. Are there better solutions out there, either ready-to-use or in-the-making? Seems to be a common problem, I’ve attempted to answer similar questions recently, with no success, and I’m interested in an answer as well.

(A good argument against this practice is also welcome, in case there are new problems that would rise if this validation were implemented; however, that seems a common thing in other languages, so I doubt it is a bad thing to want)

Answer 1

You can use the input (FF) and propertychange (all others) events to catch all forms of input including keyboard and rmb cut paste.

http://jsfiddle.net/dFBzW/

$('input').bind('input propertychange', function() {
    $('#output').html($(this).val());
});