問題描述

我有一個信用卡號輸入表單，移動瀏覽器和非移動瀏覽器都將使用它.

我想暗示一個鍵盤應該出現在移動設備上，并允許(可選)空格，所以應該接受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.

這篇關于數字+空格字符串(信用卡號)的移動友好輸入的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！