Input Type "number" vs "text"

1

I see in the docs where input type is ‘text’, even though I want a number.
When I use input type ‘number’, then I get not good looking result.

But the input type ‘number’ makes the mobile keyboard display numbers - which is what I want.

Is there any clarification how input type ‘text’ or ‘number’ should put up the right keyboard on mobile?

Thanks.

2

The “number” type input mostly triggers a different view, which is sometimes hard to style. (with up/down buttons for example)

You can trigger a numeric keyboard for regular input type=“text” by adding an additional pattern regex which limits input to digits only:

<input type="text" pattern="[0-9]+" title="number example">

How the numeric keyboard actually looks depends on the os, but normally looks like a phone keypad.

1 Like