使用 HTML5 'tel' 输入屏蔽 PIN答案

【问题标题】：Using HTML5 'tel' input for masked PIN使用 HTML5 'tel' 输入屏蔽 PIN
【发布时间】：2014-09-11 00:34:35
【问题描述】：

好的，我已经阅读了很多关于此的内容，并且遇到了一些限制......所以就这样吧。

共识似乎是'tel' 输入是强制将输入过滤为移动设备上的数字输入的最简单/最佳方法。主要是因为它触发了数字小键盘。

我正在尝试使用 HTML5 中的 'tel' 输入字段来提示用户在表单中输入他们的数字 PIN 码以进行提交。这是输入代码：

<input type="tel" pattern="[0-9]" name="PIN" value="" maxlength="10" placeholder="Numeric PIN only" autofocus required />

有几点：

当我点击输入时会显示键盘，但是我真的希望它（或任何其他键盘）在页面加载时弹出。

如果可能的话，我希望有一个“轻量级”/原生解决方案，因为我正在处理低带宽要求。

非常感谢。

【问题讨论】：

刚刚将问题标题中的 HTML 更改为 HTML5
“大家一致认为，‘tel’输入是在移动设备上强制将输入过滤为数字输入的最简单/最好的方法。” 真的吗？这似乎是一个非常糟糕的主意。为什么不...type="number"？
@T.J.Crowder 不幸的是，Apple 的文档表明了这一点。 See here.
@SandyChapman：从该页面：“要显示数字键盘，请将pattern 属性的值设置为"[0-9]*" 或"\d*"。” 他们甚至举个例子：<input type="text" pattern="[0-9]*"></input>（虽然这个例子很糟糕，你永远不会关闭input这样的标签；在HTML中，你只需写<input type="text" pattern="[0-9]*">，在XHTML中你写<input type="text" pattern="[0-9]*"/>[后者是允许的，但毫无意义，在 HTML 中]）。
这些很棒 - 谢谢@T.J.Crowder 这工作......有点。现在遇到跨平台问题 - android/chrome 似乎没有响应 [0-9]* 或 [\d*] 模式并触发数字键盘。我现在已经解决了这个问题：<input type="password" pattern="\d*" name="PIN" value="" maxlength="10" title="Your PIN should be numbers only" placeholder="Numeric PIN only" autofocus required />

【解决方案1】：

1) 要让键盘显示设置焦点，当页面加载到您的文本输入字段时使用 javascript。您可能需要添加延迟：

setTimeout(function_that_sets_input,5000);

注意：此解决方案在 iOS 5 及更低版本上存在某些问题。有时 setTimeout 不会被解雇。一个更健壮的解决方案是在 viewDidAppear（或类似的）中从 Obj-C 代码中调用 javascript 方法。

2)See this answer。您需要将模式设置为：

<input type="password" pattern="[0-9]*" ... />

【讨论】：

+1 为您的 #2，但我必须修复您的 #1：setTimeout(function_that_sets_input(),5000); 调用 function_that_sets_input 立即并将其返回值传递给 setTimeout，确切地说foo(bar()) 调用 bar 并将其返回值传递给foo 的方式。
@T.J.Crowder 谢谢。我已经有一段时间没有使用javascript了，所以我忽略了这一点。