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

Posted 2023-02-22

【中文标题】数字+空格字符串（信用卡号）的移动友好输入

【英文标题】：Mobile-friendly input of a digits + spaces string (a credit card number)

【发布时间】：2012-06-28 11:22:22

【问题描述】：

我有一个信用卡号输入表单，移动浏览器和非移动浏览器都将使用它。

我想暗示一个键盘应该出现在移动设备上，并允许（可选）空格，所以应该接受“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) 用于非移动设备。杂乱无章，对 (a) 没有真正的好处。

<input type="number"/> 自 Chrome at least will force such input to a number 以来似乎不是首发，因此用空格打断输入。

有没有比使用type="tel"更好的方法来提示移动浏览器应该提供数字键盘？

编辑：

也许-webkit-* 属性可以应用于普通文本输入字段以提示应显示小键盘？

【问题讨论】：

呸，刚刚找到一个重复的：html5 input type number vs tel

【参考方案1】：

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

如果您要为四个数字块提供单独的输入字段，并使用一些 javascript 在输入第四个数字后自动将光标从一个输入字段移动到下一个输入字段，您可以使用 <input type="number"/> 加上您会避免 iPhone 用户在键盘布局之间切换。

【参考方案2】：

对于仍然可以包含空格和其他特殊字符的文本字段，语义上正确的标记是 <input type="text" inputmode="numeric"/>，但据我所知，虽然 WhatWG 推荐使用 inputmode，但任何浏览器尚不支持它。其目的是在具有数字小键盘但仍充当文本输入的设备上为用户呈现数字小键盘。

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

如果您不想构建自己的 polyfill，您可以实现 Webshim，它现在从 release 1.14.0 开始使用 inputmode。这也有一个很好的功能，如果你想要的话，可以通过设置pattern="[0-9]*" 来保持调用iOS“数字”键盘（注意：这与设置type="number"时得到的键盘不同！）

这是我在 input type behavior across browsers 和我的 debate 上与 @aFarkas（Webshim 作者）对 polyfill 输入模式所做的分析。