是否可以创建一个输入字段,将默认输入字符集设置为手机上的数字(因此NUMERICAL KEYBOARD POPS UP)?
例如,为了更容易在 HTML 表单中输入电话号码。
7 回答
可以在“手机”上限制输入 手机表单输入使用
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
可以使用 format="*N" 限制此处的输入
您可以使用<input type='tel'>
. 这是一个新的 HTML5 功能。较旧的浏览器将简单地默认为文本输入字段。
因此,您可以使用type="tel"
或type="numbers"
。
不同之处在于,一个人试图调出您的电话拨号键盘,而另一个人只是切换到您的移动键盘的数字输入。
请参阅我使用 JavaScript 语言在您的网页上对文本输入元素的值进行跨浏览器过滤器的项目:输入键过滤器。代码示例:
<!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>
另请参阅我的页面“自定义过滤器:”输入键过滤器示例
这是一个使用 Javascript 的示例。这将只允许来自键盘顶部的小键盘/数字和格式化程序(shift/backspace/etc)的数字。您也可以考虑添加一个setTimeout()
, 具有几秒钟的超时时间,onchange
以检查是否有人将非数字粘贴到字段中以及服务器端验证。
例子
用于我对“您可以使用type="tel"
or type="numbers"
”的测试。在 iPhonetype="tel"
上调出仅数字键盘(如电话)并type="numbers"
调出数字键盘切换为数字和符号,因此两者都有效,仅取决于您的应用程序。对我来说,我只需要数字,所以我使用type="tel"
它是为了方便使用,而且效果很好!