How to force keyboard with numbers in mobile website in Android

Question

I have a mobile website and it has some HTML input elements in it, like this:

<input type="text" name="txtAccessoryCost" size="6" />

I have embedded the site into a WebView for possible Android 2.1 consumption, so that it will also be an Android application.

Is it possible to get the keyboard with numbers instead of the default one with letters when this HTML input element is focused?

Or, is it possible to set it for the whole application (maybe something in the Manifest file), if it is not feasible for an HTML element?

If want a numeric keypad on iOS in addition to Android, you should do this: http://stackoverflow.com/a/31619311/806956 — Aaron Gray, Jul 24 '15 at 20:34
The `inputmode="number"` attribute seems like the correct answer in late 2019: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode. The highest voted answer at the time of this comment suggests `type="number"`, which comes with some of its own pitfalls; `inputmode` appears to only impact the virtual keyboard display, rather than the behavior/constraints of the input itself. — SheffDoinWork, Nov 15 '19 at 21:57

score 125 · Answer 1 · edited Sep 06 '11 at 16:49

125

<input type="number" />
<input type="tel" />

Both of these present the numeric keypad when the input gains focus.

<input type="search" /> shows a normal keyboard with an extra search button

Everything else seems to bring up the standard keyboard.

edited Sep 06 '11 at 16:49

Conrad Frix

51,984
12
96
155

answered Nov 30 '10 at 12:33

Richard Kernahan

1,369
1
8
3

Will take a look at it today, and then will let you know if that would work. Thank you, Richard! – ncakmak Dec 01 '10 at 17:25
1

Hi Richard. None worked, input field is still opening the standard keyboard. – ncakmak Dec 03 '10 at 13:04
1

[The HTML specification’s list of `input` `type`s](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html), including [`number`](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#number-state-%28type=number%29) and [`tel`](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#telephone-state-%28type=tel%29). – Rory O'Kane Aug 15 '13 at 22:04
1

Note that [the keyboard for `type="tel"` is worse](http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-inputs-spin-box#comment26774412_15283380) for typing numbers than the keyboard for `type="number"`. – Rory O'Kane Aug 15 '13 at 23:00
2

`` [also brings up](http://stackoverflow.com/a/15283380/578288) the numeric keyboard, but only on iOS, [not on Android](http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-inputs-spin-box#comment26774412_15283380). – Rory O'Kane Aug 15 '13 at 23:01
`type="number"` alone misses browsers in mobile devices. You must include `inputmode="numeric"` as well. See post by @Reza. – sandraqu Sep 15 '21 at 20:59

score 53 · Answer 2 · edited Nov 01 '13 at 00:10

53

IMPORTANT NOTE

I am posting this as an answer, not a comment, as it is rather important info and it will attract more attention in this format.

As other fellows pointed, you can force a device to show you a numeric keyboard with type="number" / type="tel", but I must emphasize that you have to be extremely cautious with this.

If someone expects a number beginning with zeros, such as 000222, then she is likely to have trouble, as some browsers (desktop Chrome, for instance) will send to the server 222, which is not what she wants.

About type="tel" I can't say anything similar but personally I do not use it, as its behavior on different telephones can vary. I have confined myself to the simple pattern="[0-9]*" which do not work in Android

edited Nov 01 '13 at 00:10

Esti

3,677
8
35
57

answered Jan 30 '13 at 10:09

d.k

4,234
2
26
38

5

The automatic reformatting probably does not happen with `type="tel"`. [The spec](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#telephone-state-%28type=tel%29) notes that `tel` doesn’t enforce any particular syntax, unlike [`number`](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#number-state-%28type=number%29), which requires that its value be a [valid floating-point number](http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#valid-floating-point-number). – Rory O'Kane Aug 15 '13 at 21:58
How bad is it? We're trying to speedup the form process for our mobile customers and this seems like an obvious solution, but we also want something reliable. You posted a strong warning against using this method. I wonder if you could elaborate a bit more on that? – Philll_t Mar 18 '15 at 19:46
1

@Philll_t, a user needs to send '000222' data, but you on the server side get '222' instead. Don't you see that functionality is completely broken? The server gets wrong data. – d.k Mar 29 '15 at 10:52
Yes, I see what you mean, but what I'm saying is that: what percentage of users see this? Is this a problem on major mobile browsers such as Safari and Chrome? How do you know this is a problem, is there a link you can provide. I believe you, I just want to research myself and haven't seen anything suggesting this, maybe you can point me on the right direction. We're just trying to see if our customer base will not benefit from this. – Philll_t Mar 29 '15 at 21:04
1

@Philll_t I think the best example for this warning is for Date of Birth input fields. Where you need to input manually the day, month and year. And yes, there's still a lot of websites uses this style instead of the commonly used date pickers. Regarding the problem on Date of Birth input fields, is when you input your Day or Month starting with "0", e.g. 08. – Robin Carlo Catacutan Aug 17 '17 at 16:21
`type=number` seems to be a good solution but it is not when those up-down-arrows appear on the input field using desktop browsers. Lucky us we can hide those arrows now with CSS: https://stackoverflow.com/a/22306944/1066234 -- PS: And then you run into the next problem using `type=number` https://stackoverflow.com/q/35315157/1066234 – Avatar Sep 25 '17 at 09:04

score 26 · Answer 3 · answered Feb 23 '20 at 13:58

26

inputmode according to WHATWG spec is the the default method.

For iOS devices adding pattern could also help.

For backward compatibility use type as well since Chrome use these as of version 66.

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

answered Feb 23 '20 at 13:58

Reza Ghorbani

2,396
2
28
33

2

Thanks for the answer, I was looking for `decimal` and found it here https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode – Rami Alloush Aug 20 '20 at 21:41

Jesper Grann Laursen · Answer 4 · 2011-01-25T09:12:16.140

9

This should work. But I have same problems on an Android phone.

<input type="number" /> <input type="tel" />

I found out, that if I didn't include the jquerymobile-framework, the keypad showed correctly on the two types of fields.

~~But I havn't found a solution to solve that problem, if you really need to use jquerymobile.~~

UPDATE: I found out, that if the form-tag is stored out of the

<div data-role="page">

The number keypad isn't shown. This must be a bug...

edited Jan 25 '11 at 09:12

answered Jan 24 '11 at 12:33

Jesper Grann Laursen

2,357
1
20
21

Thanks for digging into this. I'm not sure I understand though: "if the form-tag is stored out of the div[data-role=page]". In my case the problem occurs with forms that are nicely nested inside a div[data-role=page]. Perhaps the problem is that these pages are being displayed, in my case, as dialogs? – Wytze Jun 28 '12 at 15:21

Ali Sheikhpour · Answer 5 · 2017-07-14T19:26:13.813

3

Some browsers igoners sending leading zero to the server when the input type is "number". So I use a mixing of jquery and html to load a numeric keypad and also make sure that the value is sent as a text not as a number:

$(document).ready(function(){
$(".numberonly").focus(function(){$(this).attr("type","number")});
$(".numberonly").blur(function(){$(this).attr("type","text")});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numberonly">

edited Jul 14 '17 at 19:26

answered Jul 14 '17 at 17:30

Ali Sheikhpour

10,475
5
41
82

3

This causes an annoying problem on Chrome for Android. When you tap on the input, the keyboard does **not** come up. You must then tap on the textbox a second time and then the keyboard does come up with the number-only keyboard. I really wish we had a `type="digits"` option so we didn't have to have these hacks. I mean, it's not like a zero-leading number is that rare (Zip Codes in the US are an obvious example). – Jaxidian Sep 12 '17 at 14:31
2

I face the same problem too! setting field to "type=tel" is the best solution yet. – Ali Sheikhpour Sep 13 '17 at 06:07

score 1 · Answer 6 · answered Nov 23 '21 at 12:58

1

For a Numeric Keyboard with DECIMAL POINT

<input inputmode="decimal" type="number" />

answered Nov 23 '21 at 12:58

Abdul Saleem

10,098
5
45
45

score -2 · Answer 7 · answered Jun 23 '16 at 18:11

-2

Add a step attribute to the number input

<input type="number" step="0.01">

Source: http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html

answered Jun 23 '16 at 18:11

Jogai

254
1
5
19

score -3 · Answer 8 · edited Jun 13 '16 at 20:42

-3

input type = number

When you want to provide a number input, you can use the HTML5 input type="number" attribute value.

<input type="number" name="n" />

Here is the keyboard that comes up on iPhone 4:

iPhone Screenshot of HTML5 input type number Android 2.2 uses this keyboard for type=number:

Android Screenshot of HTML5 input type number

edited Jun 13 '16 at 20:42

mplungjan

169,008
28
173
236

answered Nov 22 '14 at 04:18

Avinash A R

176
2
10

How to force keyboard with numbers in mobile website in Android

8 Answers8

Linked

Related