PIN码的输入字段

Question

我想创建一个表单,用户可以在其中输入电子邮件和4位数PIN.对于PIN输入我想使用<input type="number">而不是正则表达式,但我不知道如何隐藏输入的数字.

Answer 1

使用type password和HTML maxlength属性:

<input type="password" name="pin" maxlength="4">

http://jsfiddle.net/skxr9o47/

这将需要一些JavaScript验证以确保输入数字.

另一种方法是使用HTML 5并利用number类型(正如您已经完成的)或pattern属性并在表单中验证它.

<form>
    <input type="text" name="pin" pattern="[0-9]{4}" maxlength="4">
    <input type="submit" value="Validate">
</form>

http://jsfiddle.net/L6n9b5nr/

但是,您必须使用JavaScript或jQuery使用掩码用户的输入.

Answer 2

使用输入模式数字和密码输入

对于 Android 和 iOS，您还可以添加inputmode="numeric"到输入type="password"。用户将得到一个仅包含数字的键盘（与用于输入的键盘相同type="tel"）。例子：

<input name="pincode" type="password" inputmode="numeric" maxlength="4">

使用样式和文本输入

另一个并非在每个浏览器中都适用的选项是通过 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">