HTML5 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, Mar 16 '14 at 16:49

score 2 · Accepted Answer · answered Mar 16 '14 at 16:55

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 '14 at 16:55

Tony Dinh

6,668
5
39
58

1

I'd exclude the `Enter` or `Backspace` keys as well. – Hashem Qolami Mar 16 '14 at 16:59
@trungDQ will it on android too? – Shourya Sharma Mar 16 '14 at 17:04
@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 Mar 16 '14 at 17:04
@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. – Tony Dinh Mar 16 '14 at 17:06
it doesn't matter if the keys don't work as I require the spinners to work in node-webkits' kiosk mode (without keyboard). – Shourya Sharma Mar 16 '14 at 17:08
The spinner won't be affected at all. – Tony Dinh Mar 16 '14 at 17:19

score 0 · Answer 2 · answered Mar 16 '14 at 16:56

0

use Javascript

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

    e.preventDefault();

})

answered Mar 16 '14 at 16:56

Ayman El Temsahi

2,600
2
17
27

HTML5 CSS customization

2 Answers2