-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Description
What problem are you trying to solve?
Safari 26.2 has changed its behaviour to align with Chrome/Edge: if a user with a physical keyboard types a disallowed character, it will not show up in the input. Firefox currently lets users type in anything but has a long standing bug but they seem unsure about whether they will ever implement this feature.
Theinputmode attribute can be used to specify that I want only numbers but this has no effect on what the user can type into the input on desktop/laptop.
There are plenty of issues relating to web developers being confused or unhappy that e and - can be entered into their number input. e.g.
- how to avoid 'e' in input type NUMBER redux-form/redux-form#3952
- Input number validation and letter 'e' angular/angular#12042
- A Stack Overflow Blog post is titled Why the number input is the worst input and this allowed user input behaviour is one of its primary gripes.
When an input discards certain characters when they're typed, the assumption of many people will be that it'll discard all invalid characters. Typing "e" and having it appear in the input while every other letter is discarded is potentially confusing for users. For some of the most common use cases for the number input, such as number of items in an e-commerce store, negative numbers make no sense.
What solutions exist today?
Write a whole bunch of JavaScript.
How would you solve it?
- Disallow
.depending on thestepattribute.<input type="number" step="1" />would mean the.symbol is disallowed and rejected. - Disallow
-depending on theminattribute e.g.<input type="number" min="0" />would mean the-symbol is disallowed and rejected. - Disallow
+depending on themaxattribute e.g.<input type="number" max="-1" />would mean the+symbol is disallowed and rejected. - Disallow
e,.,+and-depending oninputmode. e.g.<input type="number" inputmode="numeric" />would disallowe,.,+and-to match the keyboard shown on mobile devices, which only shows numbers.