How do I grab the value from an html form input box as its being entered?

Question

How do I grab the value from an input box as its being entered?

Answer 1

onkeyup will be triggered every time a key is released. While it looks to be the solution it has some problems.

If the user move the cursor with the arrows, it is triggered and you have to check yourself if the field value didn't change.

If the user copy/paste a value in the input field with the mouse, or click undo/redo in the browser, onkeyup is not triggered.

Like in a mac or in google docs, I didn't want a save button to submit forms in our app, here is how I do it. Any comment, or shortcut is welcome as it is a bit heavy.

1. onfocus, store the current value of the field, and start an interval to check for changes
2. when the user moves something in the input, there is a comparison with the old value, if different a save is triggered
3. onblur, when the user moves away from the field, clear the interval and event handlers

Here is the function I use, elm is the input field reference and after is a callback function called when the value is changed: