Question

I have a table of input fields. The form will be used by inexperienced users so I want to be prepared for the worst.

I have created some code that will highlight the table row as soon as it’s input field has changed. The downside here is that the code is triggered after the user has clicked outside the inputfield.

What I am looking to achieve is the following.

• As soon as the user types in something, an even is triggered, after every digit, enter/backspace, etc. This event will highlight the table row. Later on I want to extend this function to automatically save the form locally, but I will figure out the code for that later on.
• Secondly, it is a price form, so it would be great if the user can only type in numbers

The browsers they will be using have full html5 and css3 support, and as a JavaScript engine I use the newest version of jQuery.

PS. If there are any downsides on implmenting this please let me know also.

Answer 1

Use the keyup event, the value of the input will have been updated by the time this event fires but you can change the value before the user blurs the element.

Update

You can limit the input to only numbers using a regular expression:

//bind to the `keyup` event for all `input` element(s)
$('input').on('keyup', function () {

    //replace the value of this input by only the digits in it's value
    //note that this method works even if the user pastes a block of text into the input
    this.value = this.value.replace(/[^0-9]/gi, '');
});​

Here is a demo: http://jsfiddle.net/bKsTG/1/