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

If you are able/allowed to use jQuery, you can disable keypress on the type='number'.

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

This allows you to use up and down arrows on the input, but doesn't allow keyboard input.

Answer 2

You can cancel KeyDown event using this

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

Answer 3

If I understood you correctly, I just implemented the same thing myself using vanilla Javascript (no 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>