autocomplete="bday" を MM/DD/YYYY 形式で使用するにはどうすればよいですか?

Question

入力マスクを使用して、<input type="text"> に MM/DD/YYYY 形式を適用しています。

autocomplete="bday" を使用したいのですが、WHATWG で指定されているハイフン形式は使用したくありません。

これについてはどうすればよいでしょうか?モバイル ブラウザ (主に iOS/Android) がこのボックスにフィールドを正しく入力できることを期待できますか。

Answer 1

他のものではなく日付型入力を使用します

理想的には、入力はテキスト型ではなく日付型である必要があります。理論的には、次のような利点があります:

• ユーザーの優先ロケールで日付を入力して表示します
• 日付を選択するためのカレンダー ウィジェットが含まれています
• 基本的なフロントエンド フィールドの検証。通常は常に yyyy-mm-dd 形式の有効な日付を確保します。

しかし実際には、

• 日付入力タイプは、古いブラウザ/デバイス、特に一部の携帯電話ではサポートされていません (これが重要です!)
• 入力フィールドや関連するカレンダー ウィジェットには、必ずしも簡単にアクセスできるとは限りません (残念です!)
• コンポーネントの正確な外観を制御することはできません (理想的には、あまり気にしないほうが良いですが、それでも問題ありません)

特定のフィールド (ここでは日付) が存在する場合、そのフィールドに最も専門的に適切な入力タイプを使用することが通常は最善の方法であり、ユーザーと開発の両方の観点から長期的には間違いなく優れたものになります。あなたができること/視点を維持できること。これは標準によって保証されているため、ユーザー側で何もしなくても、時間の経過とともにサポートの向上が期待でき、この機能が突然消えることはありません。

しかし、特に正確な外観の制御が失われ、特におそらく最も重要な携帯電話でのサポートが現在サポートされていないため、残念なことに、テキスト タイプの入力、多かれ少なかれアクセス可能な一連のコンボ ボックス、および/または、標準的な入力日付ではなく、ほとんどの場合あまりアクセスできないカレンダー。

日付型入力を使用できない、または使用したくない場合

オートコンプリート コンテンツは常に yyyy-mm-dd 形式でフィールドに入力されますが、これは優先形式と競合するため、変更できません。したがって、解決策はあまりありません:

• 受け入れる入力、特に yyyy-mm-dd と mm/dd/yyyy の両方に寛容になってください。
• ブラウザのオートコンプリートをキャプチャし、検出された場合に yyyy-mm-dd を mm/dd/yyyy に変換します

両方とも、入力フィールドの安定性、信頼性が低下し、ユーザーにとって理解しにくくなります。 すべてのブラウザでブラウザのオートコンプリートを確実に検出するのは簡単ではなく、おそらく不可能ですらあります。インターフェイスに「日付を mm/dd/yyyy 形式で書き込む」と表示され、フィールドに yyyy-mm が含まれている場合、ユーザーは混乱する可能性があります - dd (どの形式を使用する必要がありますか?どの形式が正しいですか?今フィールドに何を書くべきか、または指示として何を与えるべきですか?)

日付型入力を使用すると、望むか望まないかにかかわらず、すべての手間が省けます。これが私の最後の提案です。 お客様側で何もしなくても、アクセシビリティとサポートは時間の経過とともに改善されることが期待できます。日付の入力は、数年前に導入されて以来、大幅に改善されました。ピクセルパーフェクトなデザインのことは忘れてください。可能な限り標準を使用します。