一个数字+空格串的移动友好的输入(信用卡号)(Mobile-friendly input of a

2019-06-25 19:22发布

我有一个将移动和非移动浏览器中使用的信用卡号码输入表单。

我想暗示,键盘应该出现在移动设备上,并允许(可选)的空间,所以无论是“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,并在没有真正的好处(一)。

<input type="number"/>似乎是一个非首发因为铬至少将迫使这样输入到数 ,因此打破输入为空格。

是否有暗示来移动浏览器,他们应该提供一个数字键盘比用更好的方式type="tel"

编辑:

也许-webkit-*可能被应用到普通的文本输入字段属性暗示,一个小键盘应显示?

Answer 1:

对于文本字段仍然可以包含空格和其它特殊字符的语义正确的标记是<input type="text" inputmode="numeric"/>不过,据我所知,而inputmode被推荐WHATWG它还不支持通过任何浏览器。 它的目的是用数字小键盘向用户呈现的是有它的设备上,但仍然表现为文本输入。

我的建议是将填充工具inputmode与JS和更改为type="tel"上触摸设备(这是最好的解决方案目前可用的)。 要留意的是不同的设备有很大的不同“电话”和“数量”键盘,iOS的“电话”不允许空间,而Chrome的移动允许各种特殊字符。 谁知道什么定制的Android键盘呢?

如果你不想建立自己的填充工具可以实现Webshim现在polyfills inputmode作为释放1.14.0 。 这也有具有保持iOS的“数字”键盘设置调用的不错的功能pattern="[0-9]*"如果你想让它(注:这是不一样的键盘设置,当你得到type="number" !)

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



Answer 2:

据我所知没有对iPhone没有键盘布局,让数字和空间,而从数字至少会自动切换回字符。 打字之间空格的数量将要求用户的每个空间后反复切换回数字键盘布局。

如果您将提供单独的输入字段数的四大块,并使用一些JavaScript来自动通过光标从一个输入字段一旦第四号已输入移动到下一个,你可以使用<input type="number"/>再加上你会从键盘布局之间切换备用iPhone用户。



文章来源: Mobile-friendly input of a digits + spaces string (a credit card number)