Html 如何使输入字段同时输入数字和密码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8871929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make input field type both numeric and password?
提问by kaleazy
I'm aware of this:
我知道这一点：
<input type="tel">
and I'm aware of this:
我知道这一点：
<input type="password">
But I would like to use both. I want the numeric keypad to come up on iOS (specifically) but hide each character after it's typed. Is something like this possible?
但我想同时使用两者。我希望数字小键盘出现在 iOS 上（特别是），但在输入后隐藏每个字符。这样的事情可能吗？
<input type="tel|password">
回答by marco
For iOS you can set the input to type "password" and still trigger the numeric-keyboard using the HTML5-Attribute "pattern":
对于 iOS，您可以将输入设置为输入“密码”并仍然使用 HTML5 属性“模式”触发数字键盘：
<input type="password" pattern="[0-9]*" ... />
From the Apple-Documentation:
来自苹果文档：
To display a numeric keyboard, set the value of the pattern attribute to "[0-9]" or "\d".
要显示数字键盘，请将模式属性的值设置为“[0-9] ”或“\d”。
回答by Tono Nam
Html of input box:
输入框的html：
<input type="tel" name="password" id="password" value="" placeholder="Enter password"
onfocus="changeToPassword()">
Javascript:
Javascript：
// change the type of the input to password
function changeToPassword() {
setTimeout(function () {
document.getElementById("password").setAttribute("type", "password")
}, 500);
}
this solution works on the iphone. This is kind of a hack. Once you have the number pad in the next 500 miliseconds you change the attribut to password and that tricks the phone.
此解决方案适用于 iphone。这是一种黑客攻击。在接下来的 500 毫秒内获得数字键盘后，您将属性更改为密码，从而欺骗电话。
回答by Alex Datcu
You can make the input type password and then use javascript to validate that only numbers have been entered when the submit button has been pressed. http://www.configure-all.com/javascript_form_validation.php
您可以设置输入类型密码，然后使用 javascript 验证在按下提交按钮时是否只输入了数字。 http://www.configure-all.com/javascript_form_validation.php
