Limit an html form input to a certain float range

Question

Is there a way to limit a form input field to be between certain number range, say (0,100)

I'm filtering the input in the onkeydown event, to accept only numbers, the problem is I want to reject a number if that number would make the input to go out of range

So I need a way to see if the current value of the input plus the key the user is pressing will sum up between the range.

I tried using:

if((parseFloat(this.value) + parseFloat(String.fromCharCode(e.keyCode)) > 100){
    return false;
}

the thing is e.keyCode can return different codes for the same number, right now is returning 57 for the number 9, but 105 if i press the number on the numpad.

Is there a way to accomplish this?

Answer 1

Personally, I would just check it when the field loses focus (or when the form is submitted). Popping up errors as the user is typing (or preventing their keystrokes from registering in the field) is usually just going to annoy them.

And of course you probably knew this already, but make sure you check the value on the server side after the form is submitted as well. Never rely on javascript validation!

Answer 2

Adding the current value plus the float value of the character typed is not what you want. Think about if the current value is 99.0 and the user types a "5", the actual value is 99.05 but your expression would evaluate to 104.0. You need to append the key character to the current value before parsing anything into a float.

As for the key code, here is a reference to the javascript key codes. Using that you could write your own function like this:

function fromKeyCode(code) {
  var asciiCode = code;
  if (code > 95 && code < 106) {
    asciiCode -= 48;
  }
  return String.fromCharCode(asciiCode);
}

Answer 3

var total = new Number(20.00);

alert(total.toFixed(2));

That will allow you to set a fixed width on the precision of 2 decimal places. In this case I am making sure with a js required field check that money only has 2 spots after the 2.

I'm not sure if I understand your question fully, but check the Number() methods, there has to be something there to help you.

Answer 4

Trying to anticipate what the resulting value is going to be is harder than you think. Remember the user might be pressing backspace, or the cursor might not be at the end of the field, or the user might have part of the value selected, to be replaced on next keypress, and so on. It's also possible to manipulate the text field through mouse operations you won't get any say in.

The traditional approach is to put your validation on the ‘keyup’ event instead of ‘keypress’. Then you get the full, post-change value of the field. You don't get the chance to deny the keypress, but you can reset the field to the last-known-good value instead.

But either way it's best not to try to constrain input too tightly, because this can make it terribly difficult to type. For example, “12.” is an invalid number you might want to deny... but if you did, it would become very difficult to type “12.3”! Better to allow any input, but signal when the current input is out of bounds, by some mechanism (eg. turning the text red is common).

Answer 5

You can catch the input on keyup, after the value contains the new input.

Then just look at the value-

inputelement.onkeyup= function(e){
    e= window.event? event.srcElement: e.target;
    var val= parseFloat(e.value) || 0;
    e.value= Math.max(0, Math.min(100, val));
}