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

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

我想暗示一个键盘应该出现在移动设备上，并允许(可选)空格，所以应该接受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 至少会将此类输入强制为数字，因此会使用空格中断输入.

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

也许是一个 -webkit-* 属性，可以应用于普通文本输入字段以提示应该显示小键盘?

解决方案

对于仍然可以包含空格和其他特殊字符的文本字段，语义正确的标记是 但是据我所知，inputmodework/multipage/association-of-controls-and-forms.html#attr-fe-inputmode" rel="noreferrer">WhatWG 目前尚不支持任何浏览器.其目的是在具有数字小键盘但仍充当文本输入的设备上为用户提供数字小键盘.

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

如果你不想构建自己的 polyfill，你可以实现 Webshim 现在polyfills inputmode 从 release 1.14.0.这也有一个很好的特性，可以通过设置 pattern="[0-9]*" 如果你想要它来保持调用 iOS数字"键盘(注意:这不是你得到的同一个键盘当设置 type="number"!)

这是我对跨浏览器的输入类型行为和我的分析与@aFarkas(Webshim 作者)就 polyfill 输入模式进行辩论.p>

I have a credit card number input form that will be used by both mobile and non-mobile browsers.

I want to hint that a keypad should appear on mobile, and to allow (optional) spaces, so either "4111 1234 1234 1234" or "4111123412341234" should be accepted.

From what I've found, the options are:

a) <input type="tel"/> - this seems to behave as I want (with current mobile browsers at least), but it's semantically wrong.

b) <input type="text" pattern="[d ]*"/> or similar - the iPhone recognises some patterns ([0-9]*, d*) as working with the keyboard, but this doesn't work as well on Android. Also I'm not sure there are any patterns that the iPhone will give a numpad for that allow spaces, though I don't have an iPhone on hand to check right now.

c) Attempt browser detection with Javascript and use (a) for mobile and (b) for non-mobile. Cludgy, and no real benefit over (a).

<input type="number"/> seems to be a non-starter since Chrome at least will force such input to a number, therefore breaking input with spaces.

Is there a better way of hinting to mobile browsers that they should offer a numpad than using type="tel"?

Edit:

Maybe a -webkit-* property that could be applied to a normal text input field to hint that a numpad should be shown?

解决方案

The semantically correct markup for a text field that can still contain whitespace and other special characters is <input type="text" inputmode="numeric"/> however as far as I am aware while inputmode is recommended by WhatWG it is not yet supported by any browsers. Its intent is to present the user with a numeric keypad on a device that has it but still behave as a text input.

My suggestion would be to polyfill inputmode with JS and change to type="tel" on touch devices (which is the best solution currently available). Be mindful that differently devices have very different 'tel' and 'number' keypads, iOS 'tel' does not allow spaces while Chrome mobile allows all sorts of special characters. Who knows what custom Android keypads do?

If you don't want to build your own polyfill you can implement Webshim which now polyfills inputmode as of release 1.14.0. This also has has the nice feature of keeping the iOS 'number' keypad invoked by setting pattern="[0-9]*" if you want it (note: this is not the same keypad you get when setting type="number"!)

Here is the analysis I did on input type behavior across browsers and my debate with @aFarkas (the Webshim author) on polyfilling inputmode.