Question

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

Answer 1

使用类型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

如果您使用带密码类型的输入字段，则数字应显示为项目符号而不是实际数字。

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

Answer 3

使用inputmode数字和密码输入

对于Android和iOS，您还可以将Python 2.7.17 (default, Nov 7 2019, 10:07:09) [GCC 7.4.0] on linux2 Type "help", "copyright", "credits" or "license" for more information. >>> from statsmodels.stats.weightstats import ztest Traceback (most recent call last): File "<stdin>", line 1, in <module> File "/home/jico/.local/lib/python2.7/site-packages/statsmodels/stats/__init__.py", line 1, in <module> from statsmodels.tools._testing import PytestTester File "/home/jico/.local/lib/python2.7/site-packages/statsmodels/tools/__init__.py", line 1, in <module> from .tools import add_constant, categorical File "/home/jico/.local/lib/python2.7/site-packages/statsmodels/tools/tools.py", line 8, in <module> from statsmodels.compat.python import lzip, lmap File "/home/jico/.local/lib/python2.7/site-packages/statsmodels/compat/__init__.py", line 1, in <module> from statsmodels.tools._testing import PytestTester File "/home/jico/.local/lib/python2.7/site-packages/statsmodels/tools/_testing.py", line 11, in <module> from statsmodels.compat.pandas import assert_equal File "/home/jico/.local/lib/python2.7/site-packages/statsmodels/compat/pandas.py", line 4, in <module> import numpy as np File "/home/jico/.local/lib/python2.7/site-packages/statsmodels/compat/numpy.py", line 46, in <module> NP_LT_114 = LooseVersion(np.__version__) < LooseVersion('1.14') AttributeError: 'module' object has no attribute '__version__' >>>添加到输入inputmode="numeric"中。用户将获得仅包含数字的键盘（与用于输入type="password"的键盘相同）。示例：

type="tel"

使用样式和文本输入

另一个不适用于所有浏览器的选项是通过输入<input name="pincode" type="password" inputmode="numeric" maxlength="4">中的样式隐藏数字。示例：

type="text"

Answer 4

我觉得没有人真正完全回答过这个问题，我将有关多个问题的代码组合在一起，这就是我所使用的。最多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);">

PIN码的输入字段

4 个答案:

使用inputmode数字和密码输入

使用样式和文本输入