モバイルフレンドリーな数字+スペース文字列（クレジットカード番号）の入力

Question

携帯電話とモバイル以外の両方のブラウザで使用されるクレジットカード番号入力フォームがあります。

キーパッドがモバイルに表示され、（オプションの）スペースを許可する必要があることを知りたいので、「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-*プロパティ？

Answer 1

私が知っていることは、少なくとも自動的に数字から文字に切り替えることなく、数字とスペースの両方を許可するキーボードレイアウトはiPhone上にありません。その間にスペースを入れた数字を入力するには、ユーザーが各スペースの後に数字のキーボードレイアウトに繰り返し戻る必要があります。

4つの数字ブロックに個別の入力フィールドを提供し、4番目の数字が入力されると自動的にカーソルを1つの入力フィールドから次の入力フィールドに移動するためにJavaScriptを使用する場合は、<input type="number"/> iPhoneユーザーはキーボードレイアウトを切り替えることができません。

Answer 2

まだ空白や他の特殊文字を含めることができ、テキストフィールドの意味的に正しいマークアップは、しかし限りinputmodeは、それがまだのブラウザでサポートされていませんWhatWGによって推奨されている間、私は承知していますよう<input type="text" inputmode="numeric"/>です。その目的は、テンキーパッドを備えたデバイスに数字キーパッドを提示することですが、それでもテキスト入力として動作します。

私は、inputmodeをJSでpolyfillし、タッチデバイスでtype="tel"に変更することを提案しました（現在利用可能な最善の解決策です）。別の端末では電話番号と番号のキーパッドが非常に異なっていることに注意してください.iOSのtelではスペースは許可されませんが、Chromeモバイルではあらゆる種類の特殊文字が許可されます。カスタムAndroidのキーパッドは何を知っていますか？

を実装することができます。inputmodeのrelease 1.14.0のようにポリフィルを実装することができます。ここで

を私がやった分析である：（これはtype="number"を設定するときに、あなたが得る同じキーパッドではありません！注）また、これは、あなたがそれをしたい場合pattern="[0-9]*"を設定することで呼び出されたiOSの「数」キーパッドを維持する優れた機能を持っていますinput type behavior across browsersと私のdebateを@aFarkas（Webshimの著者）と一緒にpolyfilling inputmodeに追加しました。