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 に強制するため、スターターではないようです。したがって、スペースで入力を分割します。

を使用するよりもテンキーを提供する必要があることをモバイル ブラウザーに示唆するより良い方法はありtype="tel"ますか?

編集：

テンキー-webkit-*を表示する必要があることを示唆するために、通常のテキスト入力フィールドに適用できるプロパティでしょうか?

4

2 に答える 2

5

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

私の提案はinputmode、JS でポリフィルし、type="tel"オン タッチ デバイスに変更することです (これが現在利用可能な最良のソリューションです)。デバイスによって「tel」と「数字」のキーパッドが大きく異なることに注意してください。iOS の「tel」ではスペースを使用できませんが、Chrome モバイルではあらゆる種類の特殊文字を使用できます。カスタム Android キーパッドの機能を誰が知っていますか?

独自のポリフィルを作成したくない場合は、リリース 1.14.0の時点でポリフィルが可能なWebshimを実装できます。これには、必要に応じて iOS の「数字」キーパッドを呼び出したままにするという優れた機能もあります (注: これは、設定時に取得するキーパッドとは異なります!)inputmodepattern="[0-9]*"type="number"

これは、ブラウザー間での入力タイプの動作について私が行った分析と、入力モードのポリフィルに関する @aFarkas (Webshim の作成者) との議論です。

于 2014-06-16T02:57:39.750 に答える
1

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

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

于 2012-06-27T06:28:31.463 に答える