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)

possible duplicate of Is there a way to stop manual input in a type=number but still allow changes with the "up/down" buttons? — Léo Lam
– Léo Lam, Commented Apr 24, 2014 at 8:49
ah yes, that is the same question, but Mr. Alien's answer is what I am looking for. — Ed Harrod
– Ed Harrod, Commented Apr 24, 2014 at 8:53
@LéoLam Out of interest, how did you find that? It doesn't mention spinners — Ed Harrod
– Ed Harrod, Commented Apr 24, 2014 at 8:54
There's already an answer that is similar to Mr. Alien's answer. The question says: "I would like to stop users from being able to type in the input, but still allow for changes using the "up/down" arrows that appear with type=number." I believe the "spinners" you're talking about are the "arrows". — Léo Lam
– Léo Lam, Commented Apr 24, 2014 at 8:55
@LéoLam I wouldn't say they are similar personally! I understand the link, I was just curious where you saw it as I searched before I posted, was it under "Related"? — Ed Harrod
– Ed Harrod, Commented Apr 24, 2014 at 9:01

Mr. Alien · Accepted Answer · 2014-04-24 09:01:25Z

59

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%;
}

edited Apr 24, 2014 at 9:01

answered Apr 24, 2014 at 8:42

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ed Harrod Over a year ago

thanks, that's great, don't worry I have server-side validation too. It may be slightly misleading as the box can be selected with the cursor, but not changed, do you know of a way to disable selection without disabling the spinners?

Léo Lam Over a year ago

@ECH: maybe you could add some CSS styling to make it look like it's disabled? Also, this didn't prevent me from copy/pasting something into it, nor having autocomplete (!) suggest something

Peter Leupold Over a year ago

This is quite elegant. But for example if I zoom the page in the browser the arrows occupy less of the input field. Thus the 91% do not cover all the text part anymore.

Venryx Over a year ago

Couldn't you still paste arbitrary values into the field?

İlker Over a year ago

Hi, I don't know if you would see this but in React this didn't work for me.

bonney · Accepted Answer · 2019-06-25 02:50:19Z

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();">';

AG_HIHI · Accepted Answer · 2020-05-08 13:26:31Z

2

For ReactJs users, do this:

onKeyDown={(e) => {
                              e.preventDefault();
                            }}

answered May 8, 2020 at 13:26

AG_HIHI

2,0656 gold badges40 silver badges101 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related