Phone numeric keyboard for text input

Question

Is there a way to force the number keyboard to come up on the phone for an  lt input type  text  gt   I just realized that  lt input type  number  gt  in HTML5 is for    floating-point numbers     so it isn   t suitable for credit card numbers  ZIP codes  etc   I want to emulate the numeric-keyboard functionality of  lt input type  number  gt   for inputs that take numeric values other than floating-point numbers  Is there  perhaps  another appropriate input type that does that

User · Answer

There is a danger with using the  lt input type  text  pattern   d   gt  to bring up the numeric keyboard  On firefox and chrome  the regular expression contained within the pattern causes the browser to validate the input to that expression  errors will occur if it doesn t match the pattern or is left blank  Be aware of unintended actions in other browsers

User · Answer

You can try like this    lt input type  number  name  input  gt   lt input type  submit  value  Next  formnovalidate  formnovalidate  gt    But be careful  If your input contains something other than a number  it will not be transmitted to the server

User · Answer

Using the type  email  or type  url  will give you a keyboard on some phones at least  such as iPhone  For phone numbers  you can use type  tel

User · Answer

I couldn t find a type that worked best for me in all situations  I needed to default to numeric entry  entry of  7 5  for example  but also at certain times allow text   pass  for example    Users wanted a numeric keypad  entry of 7 5 for example  but occasional text entry was required   pass  for example    Rather what I did was to add a checkbox to the form and allow the user to toggle my input  id  inputSresult   between type  number  and type  text     lt input type  number  id  result      gt   lt label gt  lt input id  cbAllowTextResults  type  checkbox      gt Allow entry of text results  lt  label gt    Then I wired a click handler to the checkbox that toggles the type between text and number based on whether the checkbox above is checked     document  ready function          var cb   document getElementById  cbAllowTextResults        cb onclick   function  event            if      cbAllowTextResults   is   checked                    result   attr  type    text            else                 result   attr  type    number                 This worked out well for us

User · Answer

try this     document  ready function           document  find  input type number    attr  type    tel          refer  https   answers laserfiche com questions 88002 Use-number-field-input-type-with-Field-Mask

User · Answer

You can do  lt input type  text  pattern   d   gt    This will cause the numeric keyboard to appear   See here for more detail  Text  Web  and Editing Programming Guide for iOS   x000D   x000D   lt form gt  x000D     lt input type  text  pattern   d   gt  x000D     lt button type  submit  gt Submit lt  button gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

lt input type  text  inputmode  decimal  gt    it will give u text input using numeric key-pad

User · Answer

In 2018    lt input type  number  pattern   d   gt    is working for both Android and iOS   I tested on Android   4 2  and iOS  11 3

User · Answer

As of mid-2015  I believe this is the best solution    lt input type  number  pattern   0-9    inputmode  numeric  gt    This will give you the numeric keypad on both Android and iOS     It also gives you the expected desktop behavior with the up down arrow buttons and keyboard friendly up down arrow key incrementing     Try it in this code snippet    x000D   x000D   lt form gt  x000D     lt input type  number  pattern   0-9    inputmode  numeric  gt  x000D     lt button type  submit  gt Submit lt  button gt  x000D   lt  form gt  x000D   x000D   x000D    By combining both type  number  and pattern   0-9    we get a solution that works everywhere  And  its forward compatible with the future HTML 5 1 proposed inputmode attribute   Note  Using a pattern will trigger the browser s native form validation  You can disable this using the novalidate attribute  or you can customize the error message for a failed validation using the title attribute     If you need to be able to enter leading zeros  commas  or letters - for example   international postal codes - check out this slight variant     Credits and further reading   http   www smashingmagazine com 2015 05 form-inputs-browser-support-issue  http   danielfriesen name blog 2013 09 19 input-type-number-and-ios-numeric-keypad

User · Answer

I think type  number  is the best for semantic web page  If you just want to change the keyboard  you can use type  number  or type  tel   In both cases  iPhone doesn t restrict user input  User can still type in  or paste in  any characters he she wants  The only change is the keyboard shown to the user  If you want any restriction beyond this  you need to use JavaScript

User · Answer

lt input type  text  inputmode  numeric  gt    With Inputmode you can give a hint to the browser

User · Answer

For me the best solution was   For integer numbers  which brings up the 0-9 pad on android and iphone   lt label for  ting  gt   lt input id  ting  name  ting  type  number  pattern    d      gt    You also may want to do this to hide the spinners in firefox chrome safari  most clients think they look ugly   input type number   -webkit-inner-spin-button   input type number   -webkit-outer-spin-button         -webkit-appearance  none        margin  0       input type number          -moz-appearance textfield       And add novalidate  novalidate  to your form element  if your doing custom validation  Ps just in case you actually wanted floating point numbers after all step to whatever precision you fancy  will add     to android   lt label for  ting  gt   lt input id  ting  name  ting  type  number  pattern    d      step  0 01    gt

User · Answer

I have found that  at least for  passcode -like fields  doing something like  lt input type  tel    gt  ends up producing the most authentic number-oriented field and it also has the benefit of no autoformatting   For example  in a mobile application I developed for Hilton recently  I ended up going with this         and my client was very impressed    x000D   x000D   lt form gt  x000D     lt input type  tel    gt  x000D     lt button type  submit  gt Submit lt  button gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

You can use inputmode html attribute   lt input type  quot text quot  inputmode  quot numeric quot    gt   For more details  check-out the MDN document on inputmode

[android] Phone: numeric keyboard for text input

Examples related to android

Examples related to ios

Examples related to keyboard

Examples related to numbers

Examples related to html-input