13

Is it possible to create an input field that sets the default input character set to numbers on a mobile phone (so the NUMERICAL KEYBOARD POPS UP)?
For example to make it easier type in a telephone number into a HTML form.

user
  • 6,567
  • 18
  • 58
  • 85

7 Answers7

36

To make inputing numbers easier, use <input type="number">. To make entering phone numbers easier, use <input type="tel">. Not all phone will support them, but the iPhone at least will give you a numeric keypad by default instead of the normal keyboard. See the spec and Dive Into HTML5 for more information.

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
Brian Campbell
  • 322,767
  • 57
  • 360
  • 340
  • Watch out the limitations in entering periods and commas in such input fields: https://stackoverflow.com/q/35315157/1066234 – Avatar Dec 10 '17 at 19:05
5

It is possible to limit entry on a "mobile phone" The mobile phone form entry uses 

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">

input here can be limited using format="*N"

user
  • 6,567
  • 18
  • 58
  • 85
Deano
  • 66
  • 1
  • 1
4

You can use <input type='tel'>. This is a new HTML5 feature. Older browsers will simply default to a text input field.

Ned Batchelder
  • 364,293
  • 75
  • 561
  • 662
2

So you can use either type="tel" or type="numbers".

The difference is that one tries to bring up your phone dial keyboard and other simply switches to the numbers input of your mobile keyboard.

JeroenEijkhof
  • 2,232
  • 2
  • 25
  • 39
1

Please see my project of the cross-browser filter of value of the text input element on your web page using JavaScript language: Input Key Filter . Code example:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
 <meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
 <!-- For compatibility of IE browser with audio element in the beep() function.
 https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
 <meta http-equiv="X-UA-Compatible" content="IE=9"/>
 
 <link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">  
 <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
 <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
 
</head>
<body>
 <h1>Phone number</h1>
 Please type a phone number in the +**(***)***-**-** format. Example: +1(23)456-78-90
 <br/>
 <input id="PhoneNumber" value="+()--">
 <script>
  function getArrayPhoneNumber(value){
   if (typeof value == 'undefined')
    value = document.getElementById("PhoneNumber").value;
   return value.match(/^(\+?\d*)\((\d*)\)(\d*)-?(\d*)-?(\d*)$/);
  }
  
  function getPhoneNumber(){
   var arrayPhoneNumber = getArrayPhoneNumber();
   if(!arrayPhoneNumber)
    return "";
    
   var phoneNumber = arrayPhoneNumber[1] + arrayPhoneNumber[2] + arrayPhoneNumber[3] + arrayPhoneNumber[4] + arrayPhoneNumber[5];
   return phoneNumber;
  }
  
  inputKeyFilter.Create("PhoneNumber", function(event){//onChange event
    inputKeyFilter.RemoveMyTooltip();
    
    var arrayPhoneNumber = getArrayPhoneNumber();
    if(!arrayPhoneNumber || (arrayPhoneNumber.length != 6)){
     document.getElementById("NewPhoneNumber").innerHTML = "Incorrect format of the phone number";
     return;
    }
    
    var elementNewPhoneNumber = document.getElementById("NewPhoneNumber");
    var phoneNumber = getPhoneNumber();
    if(inputKeyFilter.isNaN(phoneNumber, this)){
     elementNewPhoneNumber.innerHTML = "";
     return;
    }
    elementNewPhoneNumber.innerHTML = phoneNumber;
   }
   , function(elementInput, value){//customFilter
    var arrayPhoneNumber = getArrayPhoneNumber(value);
    if(arrayPhoneNumber == null){
     inputKeyFilter.TextAdd(isRussian() ?
       "Недопустимый формат телефонного номера. Например: +1(234)56-78-90"
       : "Incorrect format of the phone number. Example: +1(234)56-78-90"
      , elementInput);
     if(elementInput.value == "")
      elementInput.value = elementInput.defaultValue;
     return false;
    }
    return true;
   }
   
   //onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
   , function(event){ inputKeyFilter.isNaN(parseInt(getPhoneNumber()), this); }
  );
 </script>
  New phone number: <span id="NewPhoneNumber"></span>
</body>
</html>

Also see my page "Custom filter:" example of the input key filter

Andrej
  • 679
  • 5
  • 14
0

Here's an example with Javascript. This will only allow numbers from the numpad/numbers on top of the keypad, and formatters (shift/backspace/etc). You may also consider adding a setTimeout(), with a couple seconds timeout, for the onchange event to check in case someone pastes non numbers into the field as well as server side validation.

Example

http://jsfiddle.net/vce9s/

Robert
  • 21,110
  • 9
  • 55
  • 65
0

for my testing of "you can use either type="tel" or type="numbers"." on iPhone type="tel" brings up the numbers only keypad (like phone) and type="numbers" brings up the numeric keypad switched to numbers and symbols, so both work, just depends on your application. For me I only need numbers so I used type="tel" for ease of use and it worked great!

naXa stands with Ukraine
  • 35,493
  • 19
  • 190
  • 259
Matt Carroll
  • 1