Is there a way to ONLY allow input using the spinner controls on an input type="number"?

Question

I want to restrict the user to only be able to change the contents of the box with the spinners provided with input type="number" in HTML5, and not be able to type anything into the box

<input type="number" min="0" value="0" step="5"/>

Can I do this?

(my intended audience will only be using Chrome, so the spinners not appearing on IE(9) and Firefox(13) is not an issue)

Answer 1

You can use Javascript onkeydown event here... Which will prevent the user to type anything, and still he will be able to use the arrow controls to increase and decrease the numbers.

<input type="number" min="0" value="0" step="5" onkeydown="return false" />

Demo

Note: Just don't depend on JavaScript and HTML, always have a server side validation to ensure that user didn't posted any malicious input. Javascript can be disabled and user can misuse by adding any text in the textbox, but there is no other way you can stop him, so keep a server side check as well.

---

As you commented that you will like to disable the text selection as well, so that users don't get confused, you can also use CSS positioning techniques here, as you said that intended users are of Chrome only, so there is not much of cross browser issue, so you can do something like this...

Demo 2

Wrap the input element with the span element, and just with CSS positioning technique and :after pseudo, we overlay a virtual element over the input.

Now I've kept the outline just for the demonstration purposes, you can remove them safely.

span {
    position: relative;
    outline: 1px solid #00f;
}

span:after {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    outline: 1px solid red;
    width: 91%;
}

Answer 2

Accepted answer uses onkeydown, which will disable the spinner as well; which is well documented here : https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event

You can use onkeypress which will prevent charCode keys. But MDN says keypress is on deprecation. Though it is well supported, you are advised against it. https://caniuse.com/#search=keypress

My solution is to have your own function to filter by keycodes and preventDefault on all other keyCodes. Note that updateValue is a custom function. To let the spinner do its work you can follow the inline method at the end.

myInputTag = document.getElementsByTagName('input')[0];

myInputTag.onkeydown = onlyUpDownKeys ;

function onlyUpDownKeys(e) {
(e.keyCode===38 || e.keyCode===40) ? updateValue(e): e.preventDefault(); 
}

This will work on all keyboard layouts. Explore compatibility for your users at https://caniuse.com/#search=.keycode

You may also fit this into the default inline Input tag definition in HTML like this :

'<input class="tableCell" type="number" min=0 onkeydown = "!(e.keyCode===38 || e.keyCode===40) && e.preventDefault();">';