10

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

我想暗示一个键盘应该出现在移动设备上，并允许（可选）空格，所以应该接受“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-*可以应用于普通文本输入字段以提示应该显示小键盘的属性？

4

2 回答 2

5

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

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

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

这是我对跨浏览器的输入类型行为所做的分析，以及我与@aFarkas（Webshim 的作者）就 polyfill输入模式的辩论。

于 2014-06-16T02:57:39.750 回答
1

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

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

于 2012-06-27T06:28:31.463 回答