手機友好輸入數字+空格字符串（信用卡號碼）

Question

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

我想提示一個鍵盤應該出現在手機上，並且允許（可選）空格，所以應該接受「4111 1234 1234 1234」或「4111123412341234」。

從我發現，有三種選擇：

一）<input type="tel"/> - 這似乎表現，因爲我想（與當前的移動瀏覽器至少），但它的語義錯誤。

B）<input type="text" pattern="[\d ]*"/>或類似 - 在iPhone recognises some patterns（[0-9]*，\d*）與鍵盤的工作，但這並不在Android上正常工作。此外，我不確定是否有任何iPhone可以提供空格的圖案，儘管我手邊沒有iPhone來檢查。

c）嘗試使用Javascript進行瀏覽器檢測，並使用（a）移動設備和（b）非移動設備。 Cludgy，對（a）沒有真正的好處。

<input type="number"/>自Chrome at least will force such input to a number以來似乎不是首發，因此用空格輸入。

有沒有更好的方式暗示移動瀏覽器，他們應該提供一個數字鍵盤比使用type="tel"？

編輯：

也許這可以適用於一個普通的文本輸入字段暗示，一個小鍵盤應顯示一個-webkit-*財產？

Answer 1

從我所知道的iPhone上沒有鍵盤佈局，它允許數字和空格，而且不會自動從數字切換回字符。在兩個空格之間輸入一個空格的數字將要求用戶在每個空格後重復切換回數字鍵盤佈局。

如果要爲四個數字塊提供單獨的輸入字段，並且一旦輸入第四個數字，就可以使用一些javascript自動將光標從一個輸入字段移至下一個輸入字段，您可以使用<input type="number"/>加上您可以省略iPhone用戶在鍵盤佈局之間切換。

Answer 2

的語義正確的標記文本域仍可以包含空格和其它特殊字符是<input type="text" inputmode="numeric"/>但是據我所知，而inputmode由WhatWG推薦它尚未被任何瀏覽器支持。它的目的是向用戶提供一個數字小鍵盤，該小鍵盤具有它，但仍然表現爲文本輸入。

我的建議是使用JS對inputmode進行填充，並在觸摸設備上更改爲type="tel"（這是目前可用的最佳解決方案）。請注意，不同的設備具有非常不同的'tel'和'number'鍵盤，iOS'tel'不允許空格，而Chrome移動設備允許各種特殊字符。誰知道自定義的Android鍵盤是做什麼的？

如果你不想建立你自己的polyfill，你可以實現Webshim，它現在可以填充inputmode，從release 1.14.0開始。這也有具有保持iOS的「數字」鍵，如果你想通過設置pattern="[0-9]*"調用的不錯的功能它（注：這是不是設置type="number"當你得到相同的鍵盤）

這是我做的分析input type behavior across browsers和我的debate與@aFarkas（Webshim作者）關於polyfilling inputmode。