CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Saif Bechan
Saif Bechan

Reputation: 17121

Catch input earlier than onChange and preferably only numbers

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.

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.

Upvotes: 1

Views: 3064

Answers (2)

Jasper
Jasper

Reputation: 76003

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/

Upvotes: 5

Justice Erolin
Justice Erolin

Reputation: 2879

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*/ };
});

Upvotes: 2

Related Questions