onblur 在 textarea 上基本可靠但存在兼容性缺陷：iOS Safari 点击 Done 键可能不触发，需补监听 input/change；disabled/readonly 时根本不会触发；iframe 内需内部监听并 postMessage；推荐 addEventListener 而非内联写法。
onblur 事件在 textarea 上是否可靠？
onblur 在 textarea 上会触发，但不是所有失焦场景都如预期发生。比如 iOS Safari 点击软键盘 “Done” 键时，部分版本不触发 blur；又或者用户用鼠标点击其他非可聚焦元素（如 div 无 tabindex），也可能跳过该事件。
- 必须确保
textarea没有disabled或readonly属性，否则它根本无法获得焦点，自然也不会失焦 - 若
textarea在 iframe 内，主页面监听不到它的blur，得在 iframe 内部监听并postMessage - 不要依赖内联
onblur="validate()"，改用addEventListener("blur", handler)，避免覆盖和便于解绑
表格中多个 textarea 怎么批量绑定 blur 校验？
动态表格里不能靠 ID 逐个写，推荐用事件委托或选择器批量处理：
- 使用
document.querySelectorAll("table textarea")获取全部，再遍历添加监听 - 如果表格支持行级状态（比如某行
select值为 "Rejected" 时才校验相邻textarea），应在blur处理函数中向上查找到最近的tr，再找同行的select元素判断逻辑 - 示例片段：
document.querySelectorAll("table textarea.comments-field").forEach(el => { el.addEventListener("blur", function() { const row = this.closest("tr"); const statusSelect = row?.querySelector("select[name='status']"); const shouldRequire = ["Rejected", "Discuss"].includes(statusSelect?.value); if (shouldRequire && !this.value.trim()) { this.setCustomValidity("此状态下评论必填"); this.reportValidity(); } else { this.setCustomValidity(""); } }); });
setCustomValidity 和原生提示怎么配合使用？
setCustomValidity 是控制浏览器默认校验提示的关键，但它只有在调用 reportValidity() 或表单 submit 时才真正显示 UI 提示：
- 空字符串
""表示“校验通过”，非空字符串则触发红色提示气泡 - 不要混用
required属性和手动setCustomValidity—— 如果字段本就不必填，就别设required，否则reportValidity()会因required强制报错，掩盖你的业务逻辑 - 提示文字会受浏览器 locale 影响，中文环境一般显示正常，但不要依赖它做复杂文案；更稳妥的是额外加一个
span元素用innerHTML同步更新提示文本
移动端失焦校验容易漏掉的三个点
- iOS 软键盘收起 ≠
blur 触发：必须补监听 input 或 change，尤其对粘贴操作后立即提交的场景
-
textarea 高度自适应（如通过 style.height = "auto"; style.height = scrollHeight + "px"）可能干扰焦点行为，建议校验逻辑与高度调整逻辑分离
- 用户快速连续切换
textarea（Tab 或点击），若没加防抖，可能高频触发校验、重复报错；建议用 setTimeout 延迟 200ms 再执行核心校验逻辑
blur 触发：必须补监听 input 或 change，尤其对粘贴操作后立即提交的场景textarea 高度自适应（如通过 style.height = "auto"; style.height = scrollHeight + "px"）可能干扰焦点行为，建议校验逻辑与高度调整逻辑分离textarea（Tab 或点击），若没加防抖，可能高频触发校验、重复报错；建议用 setTimeout 延迟 200ms 再执行核心校验逻辑表格里的 textarea 失焦校验，真正难的不是绑定事件，而是准确识别“该不该校验”以及“校验失败后怎么反馈才不打断用户流”——这两点不厘清，再多的 blur 监听也只是表面功夫。
立即学习“前端免费学习笔记（深入）”；
