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

[Aryeh Gregor]

On Tue, Nov 2, 2010 at 9:58 PM, Boris Zbarsky <bzbarsky at mit.edu> wrote:
> This is difficult to do in practice.  Consider:
>
>  <input type="number" min="20" max="50" value="20">
>
> The user now wishes to input 30 instead of the default value of 20. What
> steps need to be taken to do this, and how does the input control react to
> those steps?

The user backspaces twice and types "30".  IMO, unlike the Firefox
preferences control behavior I mentioned, it shouldn't prevent you
from typing anything, it should clamp onblur.  Until blur, it should
only expose the changed value to JS (.value, firing input events,
etc.) when the current value is valid -- otherwise it should remain at
the old value.

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

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

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

Trying to change the value that the user sees as they type it isn't a
good idea in general, I think.  The idea is basically that like with a
date picker, the user can see intermediate steps (browsing between
months for a date picker, typing invalid values in a number input)
that aren't visible to script.

Of course, I don't really know anything about UI, so take all this
with a grain of salt.  :)