Modify this CSS mask method to allow the user to ONLY enter values between -9999999 to 9999999

Question

I need to modify this CSS masking method so that when the user types in this input field, they can only enter values between -9999999 to 9999999.

The input field cannot be type=number, it has to be type=text. This would be the easiest way to go about this, however, this is a business requirement, that all input fields must look the same.

Here is the current masking method that needs to be modified:

  maskInputAmount(e) {
    const t = e.target.value.replace(/\[a-z]/g, '').match(/(-?)(\d{0,8})/);
    e.target.value = t[2] ? (t[1] + t[2]) : t[2];
  }

How can I modify this so that any value -9999999 to 9999999 is valid?

Answer 1

First if you can't use number inputs because of the styling then use

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

To disable the arrows in a number input it will then look the same as text inputs.

Here is a demo : https://jsfiddle.net/ybj8v36z/

EDIT:

If you want more restrictions on your input use a regex in JS to validate your value before adding it to the actual input element:

let myInput = document.getElementById("my-input");
let myInputValue = myInput.value;
let regex = new RegExp(/(^\-?[0-9]{0,11}$)/);

myInput.addEventListener("input", (e)=>{
    e.preventDefault();
    if (regex.test(myInput.value))
    {
      console.log("Change value " + myInputValue + " to " + myInput.value);
      myInputValue = myInput.value;
    } 
    else 
    {
      myInput.value = myInputValue;
    }
});

Here is a working demo : https://jsfiddle.net/75n1fkxa/1/

Hope it helps.