[whatwg] <input type=number> without keyboard editing

Aryeh Gregor:

> So if you wanted to change <input type=number min=20 max=50 value=20>
> to 30, it would go like this:

It would be more interesting with ?value=40?.

> 1) Hit backspace, user sees "2", .value is "20", no input event fired
> 2) Hit backspace, user sees "", .value is "", input event possibly fired
> 3) Type 3, user sees "3", .value is "", no input event fired
> 4) Type 0, user sees "30", .value is "30", input event possibly fired
> 5) Hit tab, user sees "30", .value is "30", no input event fired

1) hit backspace: user sees ?20? with ?0? dimmed, because this is the minimal valid value starting with ?2? and also the last used valid value, .value is ?20?
2) hit backspace: user sees ?20? dimmed, .value is ?20?, because that?s the default
3) type ?3?: user sees ?30? with ?0? dimmed, because this is the minimal valid value starting with ?3?, .value is ?30?
4) type ?0?: user sees ?30?, .value is ?30?

> If you tried to change it to 70, it would be:
> 
> 1) Hit backspace, user sees "2", .value is "20", no input event fired
> 2) Hit backspace, user sees "", .value is "", input event possibly fired
> 3) Type 7, user sees "7", .value is "", no input event fired
> 4) Type 0, user sees "70", .value is "", no input event fired
> 5) Hit tab, user sees "50", .value is "50", input event possibly fired

1) hit backspace: user sees ?20? with ?0? dimmed, because this is the minimal valid value starting with ?2? and also the last used valid value, .value is ?20?
2) hit backspace: user sees ?20? dimmed, .value is ?20?, because that?s the default
3) type ?7?: user sees ?20? dimmed, because this is the minimal valid value larger than 7 and there?s no possible valid value starting with ?7?, .value is ?20?
4a) type ?0?: user sees ?50? dimmed, because this is the maximal valid value smaller than 70, .value is ?50?
4b) type ?0?: user sees ?20? dimmed, because this is the minimal valid value larger than 0, .value is ?20?

I?m not sure whether caching the first keypress as in 4a) is better than instantly disregarding it as in 4b). Although time-outs (i.e. time-based modes) are usually bad UI, it may work here: for a fraction of a second wait for another keypress after "7" has been input and do 4a) then, otherwise time-out and do 4b). Some ?select? drop-down widgets work this way, i.e. the user can input a letter to jump to the next entry that starts with that letter and if he enters another letter this is, depending on a time-out, either used as the second letter or as another first letter.

> Trying to change the value that the user sees as they type it isn't a good idea in general, I think.

Yes, usually it isn?t. They need obvious feedback that whatever they entered has been changed to an allowed value. (If it has been neglected altogether this is just a special case, because the input would return to either the previous or the default value.)

PS: I would never hit backspace, because in most GUIs the complete current value is selected when I tab into the field and I can begin overwriting it with a keystroke (?3? or ?7? here).

Received on Friday, 5 November 2010 02:26:34 UTC