金銭的な入力については、input[type=tel]
ですが、残念ながら、モバイルデバイスのほとんどの電話のキーボードには小数点/ピリオド文字がありません。
これはユーザーが選択する支払い金額であるため、。00-.99の間の任意の小数値とともに任意のドル値にすることができます。
とりあえず、input[type=number]
ですが、モバイルデバイスでは(標準のキーボードを使用して)入力をできるだけ避けようとしているため、よりユーザーフレンドリーな入力が必要だと思います。
私は2つの選択を使用することを考えました。1つは整数の金額用で、もう1つは小数部分用ですが、何百もの数値をスクロールする必要がある場合は難しいかもしれません。
電話キーボードを使用するiOSの多くの予算の多いアプリは、最初に通貨記号が組み込まれ、10進数/ピリオドが組み込まれているフォーマット済みの入力を表示する規則を使用しています。
ユーザーが数字を押すと、事前にフォーマットされて表示されます。ユーザーが小数点/ポイントを自分で追加する必要はありません。たとえば、1、2、3、および4の数字を押したところ、アプリは次のように表示しました。
ネイティブモバイルコントロールを検討してください
数値入力では、10進数の数字パッドが表示されます。わかりやすくして、単一の数値入力と、入力例のヘルプテキストを提供することをお勧めします。 10進数などをチェックするために、常に正規表現を使用して検証できます。ローカライズが懸念される場合は、USDまたはその他に$を追加します。
お金にinput[type=tel]
を使用すると、セマンティックな意味が失われ、最適なソリューションではなくなります。
古い電話を許してください、しかし、これは簡単なアプローチの例です。ユーザーが入力するだけで、クリック数が減り、UIが減ります。
最終的には、ユーザーといくつかの異なる設計をテストして、仮定を検証する必要があります。
電話http://gyroscopestudios.com/stackexchange/phone-number.png
ATMが使用するタイプパッドを見てください(お金のコンテキストが保持され、ボタンが大きい)。 ATMと電話は同じレイアウトを使用していることに注意してください;)
ポイントとその上に削除ボタンを追加します。
そして、大丈夫/完了ボタン。
それでおしまい。
フィールドに数字を入力する順序が好ましいユーザーでテストします:最初のセント、次にドル、または最初のドル、次にセント。これは文化的に異なる場合があります。ドイツでモバイル決済アプリを作りました。