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();

                }

            }

        }
        
    }
});