驗證碼輸入欄位看起來是一列格子,底層其實只是一個原生的 <input>。簡訊自動填入(autocomplete="one-time-code")、貼上、密碼管理工具、表單和螢幕閱讀器看到的都是一個普通的文字欄位。
貼上的驗證碼會自動整理,因此「123-456」和「123 456」都能使用,所設字元類型不允許的字元則會被拒絕。在 Android 上,webOtp 會在簡訊送達時自動填入驗證碼。
驗證
填滿最後一格時會觸發 (completed)。要拒絕某個驗證碼,就在輸入欄位上設定 aria-invalid:格子會變紅並抖動。
Try 123456, or anything else.
字母、分組與遮蔽顯示
pattern="alphanumeric" 也接受字母,[groups] 會加上分隔符號,masked 則顯示為圓點。