如何使用MM/DD/YYYY格式的autocomplete="bday"？

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（我應該使用哪種格式？哪種格式是正確的？現在在字段中寫入什麼，或者作為說明給出什麼？）

日期類型的輸入將消除所有麻煩，無論您是否願意，這都是我的最終建議。 我們可以預期，隨著時間的推移，可訪問性和支援將會得到改善，而無需您執行任何操作。自從幾年前引入輸入日期以來，它已經有了很大的改進。忘記像素完美的設計。盡可能採用標準。