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.
HTML Input field force numbers
52.9k views Asked by user At
7
There are 7 answers
1
On
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.
0
On
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
0
On
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 [email protected]">
<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
0
On
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!
It is possible to limit entry on a "mobile phone" The mobile phone form entry uses
input here can be limited using format="*N"