移动友好的数字输入+空格字符串(信用卡号)

Question

我有一个信用卡号输入表单,将由移动和非移动浏览器使用.

我想暗示键盘应出现在手机上,并允许(可选)空格,因此应接受"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-*可以应用于普通文本输入字段的属性暗示应该显示小键盘？

Answer 1

<input type="text" inputmode="numeric"/>据我所知inputmode，WhatWG建议使用文本范围仍可包含空格和其他特殊字符的语义正确标记，但任何浏览器均不支持。其目的是向用户显示具有数字小键盘的设备，但仍然可以作为文本输入。

我的建议是inputmode使用JS polyfill 并更改为type="tel"在触摸设备上使用（这是当前可用的最佳解决方案）。请注意，不同的设备具有不同的“电话”和“数字”小键盘，iOS“电话”不允许空格，而Chrome移动版则允许各种特殊字符。谁知道自定义Android小键盘的作用？

如果您不想构建自己的polyfill，则可以实现Webshim，该Webshim现在inputmode从1.14.0版本开始就是polyfills。它还具有很好的功能，可以根据pattern="[0-9]*"需要通过设置来保持调用iOS“数字”键盘（注意：这与设置时获得的键盘不同type="number"！）

下面是我在做了分析，跨浏览器的输入类型的行为和我辩论上polyfilling INPUTMODE与@aFarkas（在Webshim作者）。

Answer 2

据我所知，iPhone 上没有键盘布局可以同时允许数字和空格，至少不会自动从数字切换回字符。键入中间有空格的数字将要求用户在每个空格后重复切换回数字键盘布局。

如果您为四个数字块提供单独的输入字段，并使用一些 JavaScript 在输入第四个数字后自动将光标从一个输入字段移动到下一个输入字段，那么您可以使用<input type="number"/>plus ，这样 iPhone 用户就不必在之间切换键盘布局。