验证码输入框看起来是一排格子,但底层只是一个原生的 <input>。短信自动填充(autocomplete="one-time-code")、粘贴、密码管理器、表单和屏幕阅读器看到的都是一个普通的文本框。
粘贴的验证码会被自动清理,因此“123-456”和“123 456”都能使用,所设字符类型不允许的字符则会被拒绝。在 Android 上,webOtp 会在短信到达时自动填入验证码。
验证
填满最后一格时会触发 (completed)。要拒绝某个验证码,就在输入框上设置 aria-invalid:格子会变红并抖动。
Try 123456, or anything else.
字母、分组与掩码
pattern="alphanumeric" 也接受字母,[groups] 会添加分隔符,masked 则显示为圆点。