Невозможно проверить точку для номера типа ввода

Question

Я пытаюсь добавить проверку для типа ввода, чтобы принимать только целые числа.Я добавил pattern="\d*" к элементу.Работает нормально для ввода 10.12, 10.13. Но не удается ввести 10.

Я напечатал значение для ввода html.Это 10 вместо 10..

<script>
    function getValue(){
        alert(document.getElementById("numberInput").value);
    }   
</script>   

<input type="number" id="numberInput"> </input>
<button onclick="getValue();">

В идеале он должен рассматривать 10. как неверный ввод.

Answer 1

Вставить действительно сложно.Я придумал следующее:

function setValid(target) {
  const val = target.value;
  // Remove value, as setting the same value has no effect.
  target.value = '';
  // Reset value on the next tick
  requestAnimationFrame(() => target.value = val);
}

<form action="#" method="post">
  Numbers: <input name="num"
                  type="number"
                  min="1"
                  step="1"
                  onblur="setValid(this)"
                  onpaste="requestAnimationFrame( () => setValid(this) )"
                  onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                  title="Numbers only">
  <input type="submit">
</form>

Это означает следующее:

1. Когда вход теряет фокус, он сбрасывает значение
2. При вставке он ждет, пока значение не будет установлено, а затем сбрасывает его.

Возможно, есть даже лучшие решения.

Этот ответ основан на ответе kneekiздесь .