当前位置：文江博客话题详情

HTML 输入字段强制编号

发布于 2024-09-24 01:41:44 字数 113 浏览 9 评论 0原文

是否可以创建一个输入字段，将默认输入字符集设置为手机上的数字（以便数字键盘弹出）？
例如，为了更轻松地在 HTML 表单中输入电话号码。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

请持续率性 2024-10-01 01:41:45

要使输入数字更容易，请使用。要更轻松地输入电话号码，请使用。并非所有手机都支持它们，但 iPhone 至少会默认为您提供数字键盘，而不是普通键盘。请参阅规范和< a href="http://diveintohtml5.ep.io/forms.html#type-number" rel="noreferrer">深入了解 HTML5 了解更多信息。

回复收藏 0 原文

獨角戲 2024-10-01 01:41:45

可以限制“手机”进入
手机表单录入使用

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

此处输入可以使用format="*N"进行限制

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"

回复收藏 0 原文

浅暮の光 2024-10-01 01:41:45

您可以使用。这是 HTML5 的一项新功能。较旧的浏览器将简单地默认为文本输入字段。

回复收藏 0 原文

话少情深 2024-10-01 01:41:45

因此，您可以使用 type="tel" 或 type="numbers"。

区别在于，一个尝试调出手机拨号键盘，而另一个则简单地切换到移动键盘的数字输入。

回复收藏 0 原文

终陌 2024-10-01 01:41:45

请参阅我的项目，使用 JavaScript 语言对网页上的文本输入元素的值进行跨浏览器过滤：输入键过滤。代码示例：

<!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>

另请参阅我的页面“自定义过滤器：”输入键过滤器示例

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 原文

她说她爱他 2024-10-01 01:41:45

这是一个使用 Javascript 的示例。这将只允许来自数字键盘/键盘顶部的数字和格式化程序（Shift/Backspace/等）的数字。您还可以考虑添加一个 setTimeout()，有几秒钟的超时时间，以便 onchange 事件检查是否有人将非数字粘贴到字段以及服务器端验证。

示例

http://jsfiddle.net/vce9s/

回复收藏 0 原文

陌若浮生 2024-10-01 01:41:45

对于我的测试“您可以使用 type="tel" 或 type="numbers"。”
在 iPhone 上 type="tel" 只会调出数字键盘（如电话），而 type="numbers" 会将数字键盘切换为数字和符号，因此两者工作，仅取决于您的应用程序。对我来说，我只需要数字，所以我使用 type="tel" 来简化使用，效果非常好！