Skip to content

Disallowed characters for <input type="number"> on desktop #11896

@o-t-w

Description

@o-t-w

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.

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 the step attribute. <input type="number" step="1" /> would mean the . symbol is disallowed and rejected.
  • Disallow - depending on the min attribute e.g. <input type="number" min="0" /> would mean the - symbol is disallowed and rejected.
  • Disallow + depending on the max attribute e.g. <input type="number" max="-1" /> would mean the + symbol is disallowed and rejected.
  • Disallow e, ., + and - depending on inputmode. e.g. <input type="number" inputmode="numeric" /> would disallow e, ., + and - to match the keyboard shown on mobile devices, which only shows numbers.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions