Disable writing in input type number HTML5

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.


//using this method can make a disabled writing on input type=number
input {
  cursor: default;
  /*when hover it default pointer*/
  color: transparent;
  /*make blinking cursor disappear*/
  /*but it will make to text disappear*/
  text-shadow: 0px 0px black;
  /*when it disappear add text shadow to black*/
}
<input type="number" min="-32767" max="32767" onkeydown="return false //return value false" value="0">
<!--make an input-->

using this method with css and html to do that


You can cancel KeyDown event using this

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


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>

Tags:

Html

Recent Posts