How to force keyboard with numbers in mobile website in Android

AndroidHtmlWebviewKeyboardHtml Input

Android Problem Overview


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?

Android Solutions


Solution 1 - Android

<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.

Solution 2 - Android

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

Solution 3 - Android

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"
/>

Solution 4 - Android

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...

Solution 5 - Android

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">

Solution 6 - Android

For a Numeric Keyboard with DECIMAL POINT

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

enter image description here

Solution 7 - Android

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

Solution 8 - Android

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionncakmakView Question on Stackoverflow
Solution 1 - AndroidRichard KernahanView Answer on Stackoverflow
Solution 2 - AndroidDmitry KoroliovView Answer on Stackoverflow
Solution 3 - AndroidReza GhorbaniView Answer on Stackoverflow
Solution 4 - AndroidJesper Grann LaursenView Answer on Stackoverflow
Solution 5 - AndroidAli SheikhpourView Answer on Stackoverflow
Solution 6 - AndroidAbdul SaleemView Answer on Stackoverflow
Solution 7 - AndroidJogaiView Answer on Stackoverflow
Solution 8 - AndroidAvinash A RView Answer on Stackoverflow