Disable writing in input type number HTML5

Question

I want to disable writing into a field of type number, for avoiding strings data, and write just numbers, so how to enable scroll bars only ?

<form>
 <input type="number"  path="note" min="1" max="20"/>
</form>

Answer 1

如果你能够/允许使用jQuery,你可以禁用keypress它type='number'.

$("[type='number']").keypress(function (evt) {
    evt.preventDefault();
});

这允许您在输入上使用向上和向下箭头,但不允许键盘输入.

Answer 2

如果我理解正确的话，我只是使用普通的 Javascript（没有 jQuery）自己实现了同样的事情。

window.onload = () => {
  //add event listener to prevent the default behavior
  const mouseOnlyNumberInputField = document.getElementById("mouse-only-number-input");
  mouseOnlyNumberInputField.addEventListener("keypress", (event) => {
    event.preventDefault();
  });
}

<form>
  <input id="mouse-only-number-input" name="number" type="number" min="1" max="20" value="10" />
</form>

Answer 3

您可以使用此取消K​​eyDown事件

<input type="number" onKeyDown="return false">