基本的にこの質問ですが、より使いやすさに重点を置いています:
https://stackoverflow.com/questions/48534229/what-is-the-correct-input-type-for-credit-card-numbers
したがって、これらの2つの一般的なキーボードレイアウトがあります(少なくとも、私のスマートフォンではこのように表示されます)。
1つは<input type=number>
で、もう1つは<input type=tel>
です。
今、それらが設計されたロジックにより、クレジットカードに1番を使用します。
でも、数値だけが必要なフィールドでは、<input type=tel>
のボタンを押すほうが簡単ではないでしょうか。 <input type=number>
のすべての余分な記号がビューを乱雑にしているように感じられますが、いずれにしても、これらをこのフィールドに使用することはできません。
さて、質問は次のとおりです:
「間違った」形式を使用している場合でも、これをより良いユーザーエクスペリエンスと見なしますか?
考えられる欠点についてはどうですか、これはユーザーを何らかの方法で妨害する可能性がありますか?
フィールドは、どのデータが入力されるかに直接関連する方法で構成する必要があります。
したがって、この場合、tel
形式で数値を入力する方が少し簡単かもしれませんが、実際のデータとは異なります。構文規則に違反しています。これは、とりわけアクセシビリティに影響を与えます。フィールドが(ラベルによって)クレジットカードフィールドであることをスクリーンリーダーのユーザーに通知せずに、フィールドに電話番号を入力するように指示したくない場合。それは紛らわしいです。データの入力中だけでなく、ユーザーが入力した内容を確認しているときも。
また、ページにアクセスしているすべてのデバイスがTelをその形式で解釈することを100%確信することはできません。彼らはデフォルトで標準のテキスト入力キーボードになってしまうかもしれません。
データの構文を正しくしてください。
キーボードタイプtelは大きなキーレイアウトの数字に焦点を当てているため、ユーザーにとってはるかに便利です。また、(アップル上で)どこにでも見られるテンキーに似ています。ここでアクセシビリティが役割を果たし、構文が重要であることは事実ですが、その解決策を見つけることができると思います。
私はこれを見つけました—>「パターン属性を使用して、パターン=” [0-9] *」、数値入力タイプはtelキーパッドに類似した10桁の数字キーパッドを表示します“
このキーボードレイアウトをクレジットカードのマスクされた入力フィールドに追加して、ユーザーが数字だけに集中し、他の記号に集中しないようにします。