我有一个信用卡号输入表单，将由移动和非移动浏览器使用。
我想暗示键盘应出现在手机上，并允许（可选）空格，因此应接受“4111 1234 1234 1234”或“4111123412341234”。
根据我的发现，选项是：
a）<input type="tel"/> - 这看起来像我想要的那样（至少使用当前的移动浏览器），但它在语义上是错误的。
b）<input type="text" pattern="[\d ]*"/>或类似 - iPhone recognises some patterns（[0-9]*，\d*）与键盘配合使用，但这在Android上不起作用。此外，我不确定iPhone是否会为允许空间提供任何模式，但我现在还没有iPhone可供检查。
c）尝试使用Javascript进行浏览器检测，并将（a）用于移动设备，（b）用于非移动设备。 Cludgy，并没有真正的好处（a）。
<input type="number"/>似乎是Chrome at least will force such input to a number之后的非启动者，因此用空格打破输入。
是否有一种更好的方式来暗示移动浏览器应该提供小键盘而不是使用type="tel"？
修改：
也许可以应用于普通文本输入字段的-webkit-*属性提示应该显示小键盘？
答案 0 :(得分：5)
仍然可以包含空格和其他特殊字符的文本字段的语义正确标记为<input type="text" inputmode="numeric"/>但是据我所知，WhatWG建议使用inputmode时它不是inputmode但任何浏览器都支持。它的目的是在具有它的设备上为用户提供数字小键盘，但仍然可以作为文本输入。
我的建议是用JS填充type="tel"并在触摸设备上更改为inputmode（这是目前可用的最佳解决方案）。请注意，不同的设备有非常不同的电话＆＃39;和＆＃39;数字＆＃39;键盘，iOS＆＃39; tel＆＃39; Chrome移动版允许各种特殊字符时不允许使用空格。谁知道自定义Android键盘的作用？
如果您不想构建自己的填充，则可以实施Webshim，现在从release 1.14.0开始填充pattern="[0-9]*"。这也有保持iOS＆＃39;数字的好处。如果需要，可以通过设置type="number"来调用键盘（注意：这与设置{{1}}时设置的键盘不同！）
以下是我在input type behavior across browsers和我debate与@aFarkas（Webshim作者）对polyfilling inputmode进行的分析。
答案 1 :(得分：1)
据我所知，iPhone上没有键盘布局允许数字和空间，至少不会自动从数字切换回字符。键入一个中间有空格的数字将要求用户在每个空格后重复切换回数字键盘布局。
如果您要为四个数字块提供单独的输入字段，并且在键入第四个数字后使用一些javascript自动将光标从一个输入字段移动到下一个输入字段，您可以使用<input type="number"/>加上你可以避免iPhone用户在键盘布局之间切换。