我有一个信用卡号输入表单,移动和非移动浏览器都将使用它。
我想暗示一个键盘应该出现在移动设备上,并允许(可选)空格,所以应该接受“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) 用于非移动设备。杂乱无章,对(a)没有真正的好处。
<input type="number"/>
似乎不是首发,因为Chrome 至少会将此类输入强制为 number,因此会使用空格中断输入。
有没有更好的方法来提示移动浏览器他们应该提供一个小键盘而不是使用 numpad type="tel"
?
编辑:
也许-webkit-*
可以应用于普通文本输入字段以提示应该显示小键盘的属性?