HTML5 тип ввода номер + на входе проверки регулярных выражений стереть поле, нажав точку

Question

У меня проблемы с номером типа ввода в HTML5, объединяющим его с событием oninput, чтобы иметь необязательную максимальную длину с необязательным n максимальным десятичным числом.У меня есть следующий пример кода:

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

Работает нормально, за исключением того, что при нажатии точки удаляется все число без каких-либо ошибок.Он работает с "," но на мобильном мне понадобится "."для клавиатурных целей.(Мне нужно, чтобы это работало так же, как сейчас с ',')

Answer 1

Ваша основная проблема - исчезновение текста, если вы вводите нецифровый символ. (В зависимости от настроек локализации вашего браузера, точка может считаться не числовой.) Проблема в том, что при вводе нечислового значения элемент переводится в недопустимое состояние, и значение элемента не может быть получено .

К счастью, HTML может выполнить эту проверку самостоятельно, используя атрибут step. Вы не получите удовольствия от немедленного удаления плохих символов, но ввод будет отображаться как недействительный, когда он теряет фокус. А при необходимости вы можете установить пользовательские сообщения об ошибках для элемента.

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

Answer 2

Поскольку вы хотите контролировать только длину общего числа и его десятичной части, я бы порекомендовал событие keydown вместо события input. Следующее выражение

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

• подавляет ввод, если более 8 символов
• подавляет ввод, если введено более 3 десятичных знаков
• позволяет использовать специальные клавиши, такие как backspace
• запрещает нечисловой ввод (автоматически type="number")