Html PIN 码输入栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31418453/
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
Input field for PIN code
提问by dim0_0n
I want to create a form, where user can enter Email and 4 digit PIN. For PIN input I would like to use <input type="number">instead of regex, but I don't know how to hide entered digits.
我想创建一个表单，用户可以在其中输入电子邮件和 4 位 PIN 码。对于 PIN 输入，我想使用<input type="number">而不是正则表达式，但我不知道如何隐藏输入的数字。
回答by Darren
Use the type passwordand HTML maxlengthproperty:
使用 typepassword和 HTMLmaxlength属性：
<input type="password" name="pin" maxlength="4">
This would require some JavaScriptvalidation to ensure a number was entered.
这将需要进行一些JavaScript验证以确保输入了数字。
An alternative way would be to use HTML 5and take advantage of the numbertype (As you already have done) or the patternattribute and validate it inside your form.
另一种方法是使用HTML 5和利用number类型（正如您已经完成的那样）或pattern属性并在表单中验证它。
<form>
<input type="text" name="pin" pattern="[0-9]{4}" maxlength="4">
<input type="submit" value="Validate">
</form>
However, you would have to use JavaScriptor jQueryto use mask the user's input.
但是，您必须使用JavaScript或jQuery使用屏蔽用户的输入。
回答by JFA
if you use the input field with password type, the digit should be shown as bullet points instead of the actual number.
如果您使用密码类型的输入字段，则数字应显示为项目符号而不是实际数字。
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
回答by Sonalk
I feel like no one actually fully answered the question, I've combined this code from multiple posts regarding this questions and this is what I use. 4 digit max, hidden input, only numbers and number pad is showing on both android and ios.
我觉得没有人真正完全回答了这个问题，我已经结合了多篇关于这个问题的帖子的代码，这就是我使用的。最多 4 位数字，隐藏输入，只有数字和数字键盘显示在 android 和 ios 上。
<input name="password" type="number" pattern="[0-9]" id="password" value="" maxlength="4" style="text-align: center;font-size: 40px;-webkit-text-security: disc;" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">回答by Coanda
Use inputmode numeric and password input
使用 inputmode 数字和密码输入
For Android and iOS you can also add inputmode="numeric"to an input type="password". The user will get a keyboard with only numbers (the same keyboard as used for the input type="tel").
Example:
对于 Android 和 iOS，您还可以添加inputmode="numeric"到 input type="password"。用户将获得一个只有数字的键盘（与用于输入的键盘相同type="tel"）。例子：
<input name="pincode" type="password" inputmode="numeric" maxlength="4">
Use a style and text input
使用样式和文本输入
Another option that doesn't work in every browser, is to hide the digits via the style in an input type="text". Example:
另一个不适用于每个浏览器的选项是通过 input 中的样式隐藏数字type="text"。例子：
<style>
.pincode {
text-security: disc;
-webkit-text-security: disc;
-moz-text-security: disc;
}
</style>
<input name="pincode" type="text" class="pincode" inputmode="numeric" maxlength="4">
