Trigger numeric keyboard for input text all mobile devices

Question

Is there a way to trigger the numeric keyboard for a <input type="text" /> field for all mobile devices?

I've tried both:

<input type="text" pattern="\d*" />

<input type="text" pattern="[0-9]*" />

But this only seems to trigger the numeric keyboard for iOS. Android still displays the default keypad.

Note: I'm trying to do a duration input, ie. HH:MM, so <input type="number" /> is not a solution for this as I need a input field that will accept numbers and colons.

I also don't mind using javascript if that's the only solution.

i tried with and it worked for showing numeric keyboard on iOS — rbenvenuto, Dec 20 '17 at 12:20

score -1 · Answer 1 · answered Apr 01 '16 at 01:21

-1

I didn't try this but I did see some solutions in the past:

<input type="number" pattern="[0-9]*" inputmode="numeric">

Or:

<input type="number" pattern="[0-9]*" required>

I think type=tel is also supported but never tried it:

<input type="tel">

Here you have few examples.

answered Apr 01 '16 at 01:21

Mehdi

408
4
12

This doesn't work on android devices. – Ryan King Apr 01 '16 at 01:52
@Ryan King Have you found solution? :) – css-candies Jun 13 '16 at 15:39
Nope. Doesn't look like there is one right now... – Ryan King Jun 13 '16 at 21:25
this is not working – ShaileshDev Sep 13 '19 at 08:18
`inputmode="numeric"` appears to be the [standardized](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute) approach - although [browser support](https://caniuse.com/#feat=input-inputmode) currently excludes Firefox and Safari, this is on track to become the standard, so they should eventually follow suit. – mindplay.dk Feb 14 '20 at 08:25

Trigger numeric keyboard for input text all mobile devices

1 Answers1