Is there a way to ONLY allow input using the spinner controls on an input type="number"?
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%;
}
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();">';