web-dev-qa-db-ja.com

モバイルマネー入力、最も簡単な方法

金銭的な入力については、input[type=tel]ですが、残念ながら、モバイルデバイスのほとんどの電話のキーボードには小数点/ピリオド文字がありません。

これはユーザーが選択する支払い金額であるため、。00-.99の間の任意の小数値とともに任意のドル値にすることができます。

とりあえず、input[type=number]ですが、モバイルデバイスでは(標準のキーボードを使用して)入力をできるだけ避けようとしているため、よりユーザーフレンドリーな入力が必要だと思います。

私は2つの選択を使用することを考えました。1つは整数の金額用で、もう1つは小数部分用ですが、何百もの数値をスクロールする必要がある場合は難しいかもしれません。

1
Feng Huo

電話キーボードを使用するiOSの多くの予算の多いアプリは、最初に通貨記号が組み込まれ、10進数/ピリオドが組み込まれているフォーマット済みの入力を表示する規則を使用しています。

enter image description here

ユーザーが数字を押すと、事前にフォーマットされて表示されます。ユーザーが小数点/ポイントを自分で追加する必要はありません。たとえば、1、2、3、および4の数字を押したところ、アプリは次のように表示しました。

enter image description here

3
rach oune

ネイティブモバイルコントロールを検討してください

数値入力では、10進数の数字パッドが表示されます。わかりやすくして、単一の数値入力と、入力例のヘルプテキストを提供することをお勧めします。 10進数などをチェックするために、常に正規表現を使用して検証できます。ローカライズが懸念される場合は、USDまたはその他に$を追加します。

お金にinput[type=tel]を使用すると、セマンティックな意味が失われ、最適なソリューションではなくなります。

古い電話を許してください、しかし、これは簡単なアプローチの例です。ユーザーが入力するだけで、クリック数が減り、UIが減ります。

最終的には、ユーザーといくつかの異なる設計をテストして、仮定を検証する必要があります。

電話http://gyroscopestudios.com/stackexchange/phone-number.png

1
Ken

ATMが使用するタイプパッドを見てください(お金のコンテキストが保持され、ボタンが大きい)。 ATMと電話は同じレイアウトを使用していることに注意してください;)

ポイントとその上に削除ボタンを追加します。

そして、大丈夫/完了ボタン。

それでおしまい。

フィールドに数字を入力する順序が好ましいユーザーでテストします:最初のセント、次にドル、または最初のドル、次にセント。これは文化的に異なる場合があります。ドイツでモバイル決済アプリを作りました。

0
FrankL