Strict number input field

Question

I have a simple input field with type set to number. This will be used to enter input in [0,255] range (for RGB).

<input type="number" id="inputBox" min="0" max="255" step="1" />

In its current form, this input field will accept the following values:

012   // zero prefixed numbers
1.0   // floating-point
.1    // floating-point
-5    // range underflow
300   // range overflow

I want it to accept only the integers in the range of [0,255]. So, no zero prefix, no floating-point numbers.

I've solved the range problem using input event:

inputBox.addEventListener("input", function () {
    if (this.validity.rangeUnderflow) {
        this.value = this.min;
    }
    else if (this.validity.rangeOverflow) {
        this.value = this.max;
    }
});

and floating-point problem using keydown event (by not allowing .):

inputBox.addEventListener("keydown", function (e) {
    if (!isFloat(this.step)) {
        if (e.key == ".") {
            e.preventDefault();
        }
    }
});

function isFloat(f) {
    var f        = parseFloat(f);
    var floor    = Math.floor(f);
    var fraction = f - floor;
    if (fraction > 0) {
        return true;
    }
    return false;
}

I'm stuck at solving the zero prefixed numbers problem. I can use the following line of code in the input event to remove zero prefix

this.value = this.valueAsNumber; // or parseInt(this.value, 10)

which is working fine, but this kind of breaks the input field's functionality. I can't enter values with E notation. In my case, I don't need to, but I might somewhere else. As soon as I enter 1e, it evaluates to NaN, and is assigned back to input field.

Is there a way to make these both work?

JSFiddle

All requirements except the zero prefixed numbers can be obtain with `` — Ortomala Lokni, Aug 30 '16 at 18:57
Why do you need 1e? Sounds to me, like two separate issues. You need 1 input that only allows 0-255 and another that supports `1e`. However, I don't think you would ever want an RGB input to accept something like `1e`, right? — KevBot, Aug 30 '16 at 18:59
@KevBot If I want to use this functionality in another project which I need to use exponential values, I'll face this problem again. So why ignore it now? — akinuri, Aug 30 '16 at 19:02
Because you wouldn't want to accept `1e` in an an RGB value which seems to be what this question is about. They are two separate things. — KevBot, Aug 30 '16 at 19:04
I need a solution that respects the min and max values. This is simple enough. — akinuri, Aug 30 '16 at 19:13

Jacob Brazeal · Accepted Answer · 2016-08-30T18:53:42.227

1

I just worked on a problem like this. It's super easy to do:

inputBox.addEventListener("keydown", function (e) {
    if (!isFloat(this.step)) {
        if (e.key == ".") {
            e.preventDefault();
        }
    }
    while ( this.value.toString()[0] === "0" && this.value.length > 0){
       this.value = this.value.toString().slice(1);
    }

});

Note that the value of the field might change in ways other than keydown events, suck as paste. So I would put these checks in a function, validationCheck, and run that function for each relevant event, including the catchall- onchange.

edited Aug 30 '16 at 18:53

answered Aug 30 '16 at 18:51

Jacob Brazeal

654
9
16

There might be multiple zeros in the beginning. That will require further checks. – akinuri Aug 30 '16 at 18:52

Ortomala Lokni · Answer 2 · 2016-08-30T19:18:31.423

1

You can use a regular expression such as:

<input type="text" pattern="0|[1-9]\d*">

this will gives you a string representation of a positive whole number without prefixed zeros. You then have to test with JavaScript if the value is less than or equals 255.

Here is a JSFiddle. String with only multiple zeros are not accepted.

edited Aug 30 '16 at 19:18

answered Aug 30 '16 at 19:04

Ortomala Lokni

56,620
24
188
240

I can still add multiple zeros. I've added a jsfiddle. You can test it. – akinuri Aug 30 '16 at 19:12
I don't know if this matters, but I'm not using a form. I'm not sending any data to a server. This is a client application. The data entered to the field is used in real-time. – akinuri Aug 30 '16 at 19:20
This doesn't matter, the validation is done by the browser. You can use it locally. – Ortomala Lokni Aug 30 '16 at 19:21
No, what I mean is I don't have a submit button. The validation should happen as I enter the value. – akinuri Aug 30 '16 at 19:23
If needed you can have an hidden submit button to trigger the validation. Look at http://stackoverflow.com/questions/7548612/triggering-html5-form-validation – Ortomala Lokni Aug 30 '16 at 19:26

Strict number input field

2 Answers2