HTML5 <input type="number"> CSS customization

Question

I have a HTML5 number input type

<input type="number">

My requirement is that the user should be able to set the value only through UP & DOWN arrow (spinners). User shouldn't be able to enter the value manually. Is it possible using CSS only?

I am using node-webkit.

Similar to this approach:

Can I hide the HTML5 number input’s spin box?

i need the spinners to stay. adding readonly to input removes the spinners too! — Shourya Sharma
– Shourya Sharma, Commented Mar 16, 2014 at 16:49

Tony Dinh · Accepted Answer · 2014-03-16 16:55:58Z

2

I think is not possible to use CSS only. Here is a small script to do that in case you want:

<input type="number" onkeydown="if (event.keyCode != 38 && event.keyCode != 40) {event.preventDefault()}"/>

answered Mar 16, 2014 at 16:55

Tony Dinh

6,7265 gold badges42 silver badges58 bronze badges

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

6 Comments

Hashem Qolami Over a year ago

I'd exclude the Enter or Backspace keys as well.

Shourya Sharma Over a year ago

@trungDQ will it on android too?

Tony Dinh Over a year ago

@ShouryaSharma you should consider to exclude Enter (keyCode = 13) and Backspace (keyCode = 8) keys as @Hashem suggested, just will give user ability to submit the form using Enter key, and the Backspace to..., you got the idea. Just add them into the condition.

Tony Dinh Over a year ago

@ShouryaSharma, I am not sure if this works on android. In case it doesn't work, just do some test to find the keyCode of the Up and Down key, then put them in the condition statement.

Shourya Sharma Over a year ago

it doesn't matter if the keys don't work as I require the spinners to work in node-webkits' kiosk mode (without keyboard).

|

Ayman El Temsahi · Accepted Answer · 2014-03-16 16:56:56Z

0

use Javascript

document.getElementById("myId").addEventListener("keydown", function(e){

    e.preventDefault();

})

answered Mar 16, 2014 at 16:56

Ayman El Temsahi

2,6102 gold badges19 silver badges29 bronze badges

Collectives™ on Stack Overflow

HTML5 <input type="number"> CSS customization

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related