what input field type forces the number pad mobile keyboard to come up when focused?

Question

I tried the <input type="number" /> but on Opera that outputs a strange input box coupled with an "up and down" handler. What I expected was a regular text field that once you focus on it prompts the number keyboard instead of the alphabets. Is that even possible?

p.s. I'm not trying to validate. It would be a nice user experience, that's all.

score 50 · Answer 1 · answered Nov 18 '14 at 22:40

Use pattern="[0-9]*"

Example number input: <input type="number" pattern="[0-9]*" />
Example phone input: <input type="tel" pattern="[0-9]*" />

Note: Browsers that do not support type="tel" will default to a text type

Beware: Using type="number" can cause problems with some browsers and user experience for credit card, postal code, and telephone inputs where a user might need to enter punctuation or a comma being in the output.

References:

This is the best and most current answer. Thanks for your notes and the links, both were very instructive. — Matt Cromwell, Oct 12 '15 at 23:48

score 23 · Answer 2 · answered Jul 30 '10 at 04:20

23

The official HTML5 way to handle phone numbers is:

<input type="tel">

You may not have liked the "strange input box" you got with Opera when you used<input type="number" />, but that really is the appropriate type of input area when you want to require visitors to enter a numeric value.

answered Jul 30 '10 at 04:20

Dori

915
1
12
20

but the "type=number" did not prompt the number pad, i'll try the tel type – Ayyash Jul 31 '10 at 02:12
im using opera 10 on windows mobile 6.5, i think its got some HTML5 in it, i know ive seen work, input type didnt work though – Ayyash Jul 31 '10 at 02:54
The `type="number"` attribute isn't necessarily supposed to bring up a number pad. The question is: are you trying to force users to enter in a numeric value, or enter in a phone number? For the former, `type="number"` is what you want. For the latter, `type="tel"` (the telephone keypad, including # and *) is what you're looking for. `` isn't an input field; it's a link to dial a phone number. Example: `1-408-555-5555`. – Dori Jul 31 '10 at 05:01
2

@Ayyash, I'm not pissed off—I just think you're not paying attention. You asked about input in Mobile Opera. I told you how input works for the browsers installed on many 2010-era mobile phones. @fravelgue told you that many phones don't support HTML (irrelevant, because Opera does), how one type of link works (irrelevant, because they're not inputs), and about a 2001 WAP CSS specification which doesn't apply to Opera or to WAP v1 or to HTML input fields. And btw: no, you never did say that `input type=tel` didn't work for you—you said "i'll try the tel type" but never reported your results. – Dori Aug 05 '10 at 01:48

score 12 · Accepted Answer · edited Oct 16 '15 at 06:46

12

type="number" is HTML5 and ~~many phones do not support HTML5~~. For call link you can use type="tel" or <A href="wtai://wp/mc;600112233">Special A</A>. You should look at CSS WAP extensions (page 56) too.

EDIT 10/2015:
Most if not ALL smart phones support HTML5 and CSS3, so type="number" is the best way.

edited Oct 16 '15 at 06:46

ajon

7,868
11
48
86

answered Jul 30 '10 at 10:13

fravelgue

2,633
2
24
23

1

i read that document, nothing there that makes a number pad prompt instad of alphabet, so it doesnt look like the future holds any hope for web developers :( i'll take that as a final answer – Ayyash Jul 31 '10 at 03:05
2

3 comments: ① `` is for links, not inputs. You asked about input fields, so why is the best answer one that doesn't answer your question? ② Given that WAP2 is XHTML MP (a light version of HTML), his statement "many phone don´t support HTML" means you can't use WAP2 on those phones anyway. ③ WAP is dead—see [WAP Site vs. Traditional HTML for a Mobile Website](http://stackoverflow.com/questions/284281/wap-site-vs-traditional-html-for-a-mobile-website) & [What's different between HTML and WML/WAP?](http://stackoverflow.com/questions/2836719/whats-different-between-html-and-wml-wap). – Dori Jul 31 '10 at 04:50
@Ayyash, sry i think i confussed with input and a. Anyway input type="number" is HTML5. You could use in iphone and android phones and i hope in future nokia browser. – fravelgue Aug 02 '10 at 09:13
@Dori WAP is dead (like HTML5 kill xhtml, do you know?!). But there are many browser that only support it, and there is functions of WAP that you can use in HTML MP. Remember every country is not USA or europe. – fravelgue Aug 02 '10 at 09:16
1

input type=tel is absolutely ignored by Opera Mobile, a regular keyboard is shown instead. – andreszs Sep 12 '14 at 18:51
`` causes an HTML "spinner" to be displayed on inputs [seen here](http://bit.ly/1MopGkW). Spinners cause UX issues when inputs contain non-incremental number values such as zip codes. [You can turn this off](http://bit.ly/1GuKQvi) and/or use the [pattern attribute](http://bit.ly/1P2clgX) instead as I have posted [in an alternate answer below](http://bit.ly/1MQ8mQ8). – Huski Oct 27 '15 at 06:49

score 10 · Answer 4 · answered Jul 03 '14 at 16:41

10

This post is now invalid. All smartphones support HTML5 and CSS3 now, so adding type="number" does in fact prompt the number pad to pop-up. I just checked it on 2 different Android versions, and an iPhone. Just so no one in the future tries WAP instead of the correct HTML5 format.

answered Jul 03 '14 at 16:41

Jeff Walters

161
3
11

10

Based on my testing, `type='number'` pulls up the full keyboard with numbers visible on iOS, whereas `type='tel'` pulls up the number pad, which seems to be what the poster is asking about. On Android, both `number` and `tel` pull up the number pad. – Stan Jan 29 '16 at 18:54

d35348w · Answer 5 · 2019-11-23T18:01:47.213

This will work on mobile and will prevent the letter "e" (along with all other letters) from being allowed to be typed in in the desktop version of your page. type="number" by itself still normally allows "e" per spec:

<input pattern="[0-9]*" type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');">

If you use type="number" in the above, then if you type "123" then "e" the oninput JS will replace all contents of the box. Just use type="text" if you really just want integer values.

Marc M. · Answer 6 · 2022-12-13T04:24:20.923

You can control the style of keyboard that comes up on input focus, independently of the input type, with the HTML attribute inputmode. What you're probably looking for is inputmode="numeric", which shows a number pad with 0-9. There are other options, such as a number pad with # and *. See the docs linked below.

This is ideal for uses cases where type="number" would not work, such as numbers formatted with dashes.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

score 0 · Answer 7 · answered Oct 17 '17 at 15:53

0

Try <input type="number" pattern="/d*"> OR <input type="tel" pattern="/d*"> This will help if you working with Android.

answered Oct 17 '17 at 15:53

souvik

3
3

what input field type forces the number pad mobile keyboard to come up when focused?

7 Answers7

Linked