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    lt input type  text  name  txtAccessoryCost  size  6    gt    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

User · Answer

lt input type  number    gt   lt input type  tel    gt    Both of these present the numeric keypad when the input gains focus    lt input type  search    gt  shows a normal keyboard with an extra search button  Everything else seems to bring up the standard keyboard

User · Answer

Add a step attribute to the number input   lt input type  number  step  0 01  gt    Source  http   blog pamelafox org 2012 05 triggering-numeric-keyboards-with-html5 html

User · Answer

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    x000D   x000D    document  ready function    x000D      numberonly   focus function     this  attr  type   number      x000D      numberonly   blur function     this  attr  type   text      x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input type  text  class  numberonly  gt  x000D   x000D   x000D

User · Answer

This should work  But I have same problems on an Android phone    lt input type  number    gt   lt input type  tel    gt    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    lt div data-role  page  gt     The number keypad isn t shown  This must be a bug

User · Answer

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    lt input   inputmode  numeric    pattern   0-9      type  number    gt

User · Answer

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

User · Answer

input type   number  When you want to provide a number input  you can use the HTML5 input type  number  attribute value    lt input type  number  name  n    gt    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

[android] How to force keyboard with numbers in mobile website in Android

Examples related to android

Examples related to html

Examples related to webview

Examples related to keyboard

Examples related to html-input