HTML5输入类型编号+ oninput regex验证会擦除该字段，并按点

Question

I'm having problems with an input type number in HTML5 combining it with an oninput event to have an optional max length qith an optional n max decimals in it. I have the following example code:

 <input type="number" name="name" step="any" oninput=" this.value = (this.value.length > 8) ? this.value.slice(0,8) : this.value; /^[0-9]+(.[0-9]{1,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0,-1); "> 

It works fine except that when a dot is pressed down it removes the entire number without any kind of error. It works with ',' but on mobile I will need the '.' for keyboard purposes. (I need that works too like now with ',')

Answer 1

Since you only want to control the length of the total number and of its decimal part, I would recommend the keydown event instead of the input event. The following expression

<input type="number" name="name" step="any" onkeydown=
"return event.keyCode<32 || this.value.length<8 && /^\d*([.,]\d{0,2})?$/.test(this.value)"
>

• suppresses input if more than 8 characters
• suppresses input if more than 3 decimals are entered
• allows special keys like backspace
• disallows non-numeric input (automatic by type="number" )

Answer 2

Your main problem is your text disappearing if you enter a non-numeric character. (Depending on your browsers localization settings, a dot could be considered non-numeric.) The problem is that entering a non-numeric value puts the element into an invalid state, and the element's value cannot be retrieved .

Fortunately, HTML can do this validation by itself, using the step attribute. You don't get the satisfaction of bad characters being immediately erased, but the input will show as invalid once it loses focus. And if needed, you can set custom error messages for the element.

 <input id="identification" type="number" name="name" step="0.001" min="0" max="99999999" />