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>

Answer 4

//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

Answer 5

No Scrolling, no increment of numbers, max-length provided, no copy paste.

Check out the Fiddle below, which has the features needed within a type number form field.

HTML

<form class="form-horizontal home" role="form" action="" method="post" id="payment-form" novalidate="novalidate">
<label for="number">Mobile number : </label>
<input class="form-control" id="number" name="number" type="number" data-rule-required="true" aria-required="true" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">
</form>

CSS

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

DEMO - JSFIDDLE

Answer 6

//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-->

Answer 7

In the onkeydown event, event.keyCode returns the ASCII code of the pressed key. The code for numeric keys 0-9 are 48-57. So, we can check if the pressed key is a number (between 0-9) and allow the event to proceed or not based on that

 <input type="number" path="note" min="1" max="20" onkeydown="return event.keyCode >= 48 && event.keyCode <= 57"/>

Answer 8

In js file :

$("[type='number']").keydown(function (e) {
        return (e.keyCode === 38 || e.keyCode === 40) ? false: true;
    })

Answer 9

Looking for css solutions only:

[type="number"] {
  pointer-events: none;
}

::-webkit-inner-spin-button {
  pointer-events: auto;
  opacity: 1;
}


/* fallback for firefox: */
@supports (-moz-appearance: textfield) {
    [type="number"] {
        pointer-events: unset;
    }
}

<input type="number">

Answer 10

Firstly, your markup is incorrect. The form tags must surround the input tag:

<form name="my_form">
    <input ...code...
    <input ...code...
</form>

Secondly, if you are using HTML5 and want a number input, you can use this:

<input type="number" name="my_number" min="0" max="100" step="1" value="50"/>

(from W3Schools)

Be aware that current browser implementations of the "number" input vary.

You then reference the value using Javascript, or have it posted using the form.