A brief post explaining why you might not want the "freebies" a browser gives you
when a form component has an input
type of number
.
Let’s get to the point. By default number type inputs on a form will change with the scroll wheel. I’m not sure that’s ever a desirable feature on a desktop device if accuracy matters?
Exhibit A: Meter Reading
Here’s a particularly annoying example: Octopus Energy’s meter reading submission form. If you happen to start scrolling whilst on the meter reading input then the number is going to change! For a page which has the sole purpose of capturing that number this is not ideal.
The conditions for this error are particularly likely on this form.
It only has two inputs, the meter reading value and the date. The date defaults
to today (I expect that’s the most common value). That means for the typical
use case the number input
is the only form element that will have focus. The
page also has a nice big design and font, so you’re likely to be scrolling down
to get to the Submit button.
I would hazard a guess there is a non-trivial increase in accuracy to be had by disabling scroll from changing the value when browsing on desktop devices for this page. The UI on the Octopus Energy website does prompt you before submission (which is how I realised the numbers changed and started writing this post), but still, for a form that is likely used millions of times a month it really feels worth optimising further!
Fixing
Is the fix difficult? I don’t think so. I am not on the Octopus Energy UI team but
I think it is as simple as grabbing the onWheel
event for the input
and
blurring the element, i.e. without focus the numbers aren’t going to move.
If you are after even more thoughts on number inputs being difficult
check out Stack Overflow’s rant post about the number input challenges.