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 one i.e. step=1 and also I have set min=1.

I am using the following code:

<form action="" class="cart" method="post" enctype='multipart/form-data'>
    <div class="quantity">
        <input type="number" step="1" min="1"  name="quantity" value="1" title="Qty" class="input-text qty text" />
    </div>
    <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>     
</form>

Is there any patch or hack to make it work in Firefox and IE9. Or else, what could be the possible solution for that.

Answer 1

With a simple and clean implementation I was able to fix this issue on Firefox/Safari/Chrome etc...

<input type="number" onKeyDown={(e) => this.logic.checkIfNumber(e)} />

checkIfNumber(event) {

   /**
    * Allowing: Integers | BackSpace | Tab | Delete | Left & Right arrow keys
    **/

   const regex = new RegExp(/(^\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight)/);
        
   return !event.key.match(regex) && event.preventDefault();
}

Allowing more keys:

By logging the event.key in the console you are able to check the actual value of the pressed key while then adding it to the regex using a pipe | symbol.

Keep in mind that this solution only allows Integers, if you want to allow floating numbers(decimals) use the following regex pattern

regex = new RegExp(/(^\d*\.?\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight)/)

You can build and check your regex pattern here:

• https://regex101.com/

Answer 2

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

                }

            }

        }
        
    }
});