O3noBLOG
·
onAutofill
💡
原文中文，约2900字，阅读约需7分钟。
📝
内容提要
在网络标准中，autofill（自动填入）与 autocomplete（自动补全）有所不同，autofill 可能不会触发 change/input 事件，导致表单无法提交。尽管 HTML 标准有规定，但部分浏览器仍遵循旧规范。可以通过 CSS 监测 autofill 事件，并结合 JS 处理，以改善用户体验。
🎯
关键要点
- autofill（自动填入）与 autocomplete（自动补全）是不同的概念，autofill 可能不会触发 change/input 事件。
- 如果表单设计依赖于 change/input 事件进行验证，autofill 可能导致表单无法提交，影响用户体验。
- HTML 4.01 和 HTML Living Standard 对于 change 事件的触发时机有不同的定义，后者增加了数据提交时的触发。
- 部分浏览器仍遵循旧规范，导致 autofill 不触发事件的问题由来已久。
- 可以通过 CSS 伪类 :autofill 和 CSS 动画结合 JS 事件监听来检测 autofill 事件，避免定时检查。
- 第三方工具（如密码管理器）也可能影响 autofill 行为，需通过观察自定义属性来判断事件。
- 虽然没有提供完整的代码，但提供的信息足以帮助他人完成 autofill 事件的检测。
❓
延伸问答
autofill和autocomplete有什么区别？
autofill（自动填入）和autocomplete（自动补全）是不同的概念，autofill可能不会触发change/input事件。
为什么autofill可能导致表单无法提交？
因为autofill可能不会触发change/input事件，导致表单验证无法执行，从而无法提交。
如何检测autofill事件？
可以通过CSS伪类:autofill和CSS动画结合JS事件监听来检测autofill事件。
不同浏览器对autofill的支持情况如何？
部分浏览器仍遵循旧规范，导致autofill不触发事件的问题由来已久。
第三方工具如何影响autofill行为？
第三方工具如密码管理器的自动填入行为可能不同，有些工具会添加自定义属性以便检测。
HTML标准对change事件的定义有什么变化？
HTML 4.01和HTML Living Standard对change事件的触发时机有不同的定义，后者增加了数据提交时的触发。
🏷️
标签
➡️
