如何使用MM/DD/YYYY格式的autocomplete="bday"?
P粉757432491
P粉757432491 2024-03-21 21:33:54
0
1
410

我正在使用輸入遮罩在 <input type="text"> 上強制執行 MM/DD/YYYY 格式。

我想使用 autocomplete="bday",但我不想使用 WHATWG 指定的連字號格式。

對此我能做什麼?我能否期望行動瀏覽器(主要是 iOS / Android)將欄位正確輸入到此框中。

P粉757432491
P粉757432491

全部回覆(1)
P粉005134685

使用日期類型的輸入而不是其他任何內容

在理想的情況下,您的輸入應該是日期類型而不是文字類型。理論上,它具有以下優點:

  • 以使用者首選區域設定輸入和顯示日期
  • 包含用於選擇日期的日曆小工具
  • 基本前端欄位驗證,通常可確保您始終擁有 yyyy-mm-dd 格式的有效日期

但是在實踐中,

  • 舊版瀏覽器/裝置不支援日期輸入類型,尤其是某些手機(這是最重要的!)
  • 輸入欄位和/或關聯的日曆小工具並不總是很容易存取(真遺憾!)
  • 您無法控制組件的確切外觀(理想情況下您不應該太關心它,但是也好)

對給定欄位使用最專業的適當輸入類型(如果存在)(這裡是日期)通常是您可以做的最好的事情,並且從用戶和開發角度來看,從長遠來看,這肯定是您可以做的最好的事情/維護的角度。它受到標準的保證,這意味著隨著時間的推移,您可以期待更好的支持,而無需您做任何事情,並且該功能不會突然消失。

然而,尤其是對精確外觀的控制的喪失,以及目前缺乏支持,尤其是在可能是最重要的手機上,遺憾的是導致選擇文本類型的輸入,一系列或多或少可訪問的組合方塊和/或大多數時候不是很容易存取的日曆,而不僅僅是標準輸入日期。

如果您不能或不想使用日期類型的輸入

自動完成內容始終以 yyyy-mm-dd 格式填充字段,它與您首選的格式相矛盾,並且您無法更改它。所以你沒有很多解決方案:

  • 對您接受的輸入內容保持寬容,尤其是同時接受 yyyy-mm-dd 和 mm/dd/yyyy。
  • 捕捉瀏覽器的自動補全功能,並在偵測到時將 yyyy-mm-dd 轉換為 mm/dd/yyyy

兩者都會使您的輸入欄位不太穩定、不太可靠且不太容易被使用者理解。 我想在所有瀏覽器上可靠地檢測瀏覽器自動完成功能並不容易,甚至可能是不可能的,並且當介面顯示“以mm/dd/yyyy 格式寫入日期”而欄位包含yyyy-mm 時,用戶可能會感到困惑-dd(我應該使用哪種格式?哪種格式是正確的?現在在字段中寫入什麼,或者作為說明給出什麼?)

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板