友好的数字+空格字符串输入（信用卡号码）
我有一个信用卡号码输入表单，供移动和非移动浏览器使用。
我想提示移动设备上应出现小键盘，并允许（可选）空格，因此应接受“4111 1234 1234 1234”或“4111123412341234”。
从我发现的，选项是：
a） <input type="tel"/> - 这看起来像我想要的一样（至少使用当前的移动浏览器），但它的语义错误。
b） <input type="text" pattern="[d ]*"/>或类似的东西 - iPhone识别一些与键盘一起工作的模式（ [0-9]* ， d* ），在Android上也可以工作。 此外，我不确定是否有任何iPhone可以提供空格的图案，尽管我手边没有iPhone来检查。
c）尝试使用Javascript进行浏览器检测，并使用（a）移动设备和（b）非移动设备。 Cludgy，对（a）没有真正的好处。
<input type="number"/>由于Chrome至少会将这种输入强制为一个数字，因此使用空格输入会导致输入错误。
有没有更好的方式暗示移动浏览器，他们应该提供一个数字键盘，而不是使用type="tel" ？
编辑：
也许可以应用于普通文本输入字段的-webkit-*属性提示应该显示数字小键盘？
但是，仍然可以包含空格和其他特殊字符的文本字段的语义正确标记是<input type="text" inputmode="numeric"/>但是据我所知，虽然inputmode由WhatWG推荐，但尚未支持通过任何浏览器。 它的目的是向用户提供一个数字小键盘，该小键盘具有它，但仍然表现为文本输入。
我的建议是使用JS对inputmode ，并在触摸设备上更改为type="tel" （这是目前可用的最佳解决方案）。 请注意，不同的设备具有非常不同的'tel'和'number'键盘，iOS'tel'不允许空格，而Chrome移动设备允许各种特殊字符。 谁知道自定义的Android键盘是做什么的？
如果你不想构建你自己的polyfill，你可以实现Webshim，它现在从版本1.14.0开始inputmode 。 这也有一个很好的功能，通过设置pattern="[0-9]*"来保持iOS的“数字”键盘，如果你想要的话（注意：这与设置type="number" ！）
以下是关于跨浏览器的输入类型行为以及我在@aFarkas（Webshim作者）关于polyfilling inputmode的辩论中所做的分析。
据我所知，iPhone上没有键盘布局，允许数字和空格，而且不会自动从数字切换回字符。 在两个空格之间输入一个空格的数字将要求用户在每个空格后重复切换回数字键盘布局。
如果要为四个数字块提供单独的输入字段，并且一旦键入了第四个数字，就可以使用一些javascript自动将光标从一个输入字段移动到下一个字段，您可以使用<input type="number"/>另外你还可以让iPhone用户在键盘布局之间切换。
上一篇: friendly input of a digits + spaces string (a credit card number)
下一篇: Custom MPVolumeView Thumb Image not vertically centered since iOS 5.1