PIN码输入栏 [英] Input field for PIN code

问题描述

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

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.

推荐答案

使用类型密码和HTML maxlength 属性：

Use the type password and HTML maxlength property:

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

http://jsfiddle.net/skxr9o47/

这需要一些 JavaScript 验证才能确保输入了一个数字。

This would require some JavaScript validation to ensure a number was entered.

另一种方法是使用 HTML 5 并利用数字类型（如您已经完成的操作）或 pattern 属性并在表单中对其进行验证。

An alternative way would be to use HTML 5 and take advantage of the number type (As you already have done) or the pattern attribute and validate it inside your form.

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

http://jsfiddle.net/L6n9b5nr/

但是，您必须使用 JavaScript 或 jQuery 来屏蔽用户的输入。

However, you would have to use JavaScript or jQuery to use mask the user's input.

这篇关于PIN码输入栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！