HTML5 input type number not working in firefox

Question

I am using HTML5 input type=number. Its working perfectly in Chrome browser, but its not working in Firefox and IE9.

I want to increment the quantity by

Answer 1

To allow only number and points to be written in an input we have to get the value of the pressed key and compare it with a REGEX (test() method), otherwise the event isn't executed.

const input = document.getElementById("numberInput");    

input.addEventListener("keypress", e => {

    // If the input is empty and the key pressed is "0" nothing is printed
    if (!e.target.value && e.key == 0) {

        e.preventDefault();

    } else {

        // If the key pressed is not a number or a period, nothing is printed
        if (!/[0-9.]/.test(keyValue)) {

            e.preventDefault();

        }

    }

}

Also I created a function that allows writing a maximum of three whole numbers and two decimal numbers. I hope it helps you.

I usually post information that has helped me or some solutions on my twitter (@PabloAndresValC)

input.addEventListener("keypress", e => {

    const keyValue = e.key;

    // If the input is empty and the key pressed is "0" nothing is printed
    if (!e.target.value && keyValue == 0) {

        e.preventDefault();

    } else {
        // If the key pressed is not a number or a period, nothing is printed
        if (!/[0-9.]/.test(keyValue)) {

            e.preventDefault();

        } else {
            // If the number has one or two whole numbers and a point, another 
            // point won't be printed
            if (/[0-9]{1,2}[.]/.test(e.target.value) && keyValue == ".") {

                e.preventDefault();

            } 
             // If the number has one or two whole numbers and a point
            else if (/[0-9]{1,2}[.]/.test(e.target.value)) {
                // We can write up to two more numbers after the point
                if (/[0-9]{1,2}[.][0-9]{2}/.test(e.target.value)) {

                    e.preventDefault();

                }

            } 
            // If there are 3 numbers and we press another, a point 
            // will be printed automatically
            // And we can write up to two more numbers after the point
            else if (/[0-9]{3}/.test(e.target.value) && keyValue != ".") {

                    e.target.value += ".";

                if (/[0-9]{3}[.][0-9]{2}/.test(e.target.value)) {

                    e.preventDefault();

                }

            }

        }
        
    }
});

Answer 2

It is not supported in firefox or internet explorer, except for version 11 which has partial support. See this comparison matrix.

You can use the number polyfill shim to get support for unsupported browsers.

Answer 3

I am using firefox, I had the same issue developing my input type number typing characters and spaces etc... anyway I am using angular 2 in this example, it's almost similar to JavaScript, so you can use this code in every case : here is the html :

<input class="form-control form-control-sm" id="qte" type="number"  min="1" max="30" step="1" [(ngModel)]="numberVoucher"
     (keypress)="FilterInput($event)" />

here is the function FilterInput :

FilterInput(event: any) {
        let numberEntered = false;
        if ((event.which >= 48 && event.which <= 57) || (event.which >= 37 && event.which <= 40)) { //input number entered or one of the 4 directtion up, down, left and right
            //console.log('input number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
            numberEntered = true;
        }
        else {
            //input command entered of delete, backspace or one of the 4 directtion up, down, left and right
            if ((event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode == 46 || event.which == 8) {
                //console.log('input command entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
            }
            else {
                //console.log('input not number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
                event.preventDefault();
            }
        }
        // input is not impty
        if (this.validForm) {
            // a number was typed
            if (numberEntered) {
                let newNumber = parseInt(this.numberVoucher + '' + String.fromCharCode(event.which));
                console.log('new number : ' + newNumber);
                // checking the condition of max value
                if ((newNumber <= 30 && newNumber >= 1) || Number.isNaN(newNumber)) {
                    console.log('valid number : ' + newNumber);
                }
                else {
                    console.log('max value will not be valid');
                    event.preventDefault();
                }
            }
            // command of delete or backspace was types
            if (event.keyCode == 46 || event.which == 8) {
                if (this.numberVoucher >= 1 && this.numberVoucher <= 9) {
                    console.log('min value will not be valid');
                    this.numberVoucher = 1;
                    //event.preventDefault();
                    this.validForm = true;
                }
            }
        }
        // input is empty
        else {
            console.log('this.validForm = true');
            this.validForm = false;
        }
    };

in this function I had to just let the keypress of numbers, direction, deletes enter.

Answer 4

Alternately, you can use a textfield with a pattern="" attribute. Although it doesn't have the up and down buttons, it does validate for having the correct values:

<input type="text"
       name="quantity"
       pattern="[1-9]"
       value="1"
       required
       title="Qty"
       class="input-text qty text"
/>

You can alter the pattern to your quantity wishes, it is now set for a value ranging from 1 to 9. Also you can add up/down buttons with JS/jQuery that have hotkeys bound to them for a more number-field-like feel.

Answer 5

The input type number is not supported yet in Firefox or IE9 (almost in IE10), so it will revert to input type text.

See this compatibility chart.

There's really no need for a "patch or hack" - a regular input field will work just fine. That's why it reverts to a text field. Whether or not it displays as an actual number field to the end-user is just a bonus to make it slightly more convenient. You should still be doing server-side checks on whatever value is sent to you, so allowing a user to just type in a number when their browser doesn't support the number type shouldn't harm anything.

Answer 6

Note: The min attribute of the tag is not supported in Internet Explorer 9 and earlier versions, or in Firefox.

Note: The min attribute will not work for dates and time in Internet Explorer 10, since IE 10 does not support these input types.

Source: http://www.w3schools.com/tags/att_input_min.asp