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.

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.

• javascript
• jquery
• html
• forms

Share Improve this question Follow asked Mar 8, 2012 at 23:32 Saif BechanSaif Bechan 17.2k2323 gold badges8585 silver badges125125 bronze badges 1

• Use keyup() instead of blur() is just a guess, but without seeing what you have tried I have no idea. With HTML5 you can set an input type="number" – Jay Blanchard Commented Mar 8, 2012 at 23:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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/bKsTG/1/

Use the keyup event, and check the event.keyCode value to check if it's a digit, enter/backspace

$('selector').keyup(function(event){
   if (event.keyCode in [48,49, 50 .... 57,13]){ /* your code*/ };
});