iOS Safari 表单提交后键盘不收起是因 WebKit 延迟焦点管理，需用 document.activeElement?.blur() 加 setTimeout 延迟调用；inputmode 与 type 冲突时 Android 优先 type；iOS 对 :valid 触发保守，应改用 JS 验证；submit 按钮失效常因 pointer-events 或 z-index 问题。
表单提交时 iOS 键盘不收起？blur() 失效的真相
iOS Safari 在表单提交后不会自动收起软键盘，哪怕你调用了 blur() 或 focusout，这是因为 WebKit 对 input 元素的焦点管理有延迟策略——尤其在 form.submit() 触发后，浏览器会优先处理导航或重载，跳过焦点清理。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
blur()后立刻收起键盘；改用document.activeElement?.blur()+setTimeout延迟 100ms 再调用，给浏览器留出渲染间隙 - 对
textarea和input[type="text"]等可编辑元素统一监听submit事件，在事件处理器开头就执行document.activeElement?.blur() - 避免在
submit回调里做异步操作（如fetch）后再调blur()，此时页面可能已跳转或重绘，activeElement已失效
inputmode 和 type 混用导致 Android 键盘错乱
inputmode 是控制软键盘类型的提示属性，但它不是万能开关；当它和 type 冲突（比如 type="number" + inputmode="text"），Android Chrome 会优先信任 type，而忽略 inputmode，结果弹出数字键盘却允许输入字母，造成校验混乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只在
type="text"场景下谨慎使用inputmode（如inputmode="decimal"配合金额输入） - 手机号、邮编等“看起来像数字但需自由输入”的字段，用
type="text"+inputmode="numeric"，再配合pattern和 JS 校验，别用type="number" - iOS Safari 对
inputmode支持较弱，测试时务必真机验证，不能只信 Chrome DevTools 的模拟
跨平台表单验证失败：为什么 :valid 在 iOS 上总为 true？
iOS Safari 对原生表单验证（required、pattern、minlength）的触发时机很保守：它只在用户**离开字段**（blur）或**显式提交表单**时才计算 :valid 状态，而不会像 Chrome 那样实时响应输入。这就导致用 CSS 选中器 input:valid 做实时样式反馈，在 iOS 上完全失灵。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃纯 CSS 的
:valid/:invalid反馈，改用 JS 监听input和blur事件，手动切换class（如is-valid） - 对
required字段，可在submit时用checkValidity()主动触发验证，再统一处理 UI - 注意
setCustomValidity('')必须在每次输入后重置，否则旧错误会残留，影响后续checkValidity()结果
移动端 submit 按钮点击无响应？检查 pointer-events 和 z-index
某些 UI 框架（如 Tailwind 的 group 或自定义 button 封装）会在按钮外层加一层 div 或伪元素，若该容器设置了 pointer-events: none，或子元素 z-index 错乱，iOS Safari 会直接忽略点击穿透，表现为按钮“点不动”，但 PC 浏览器一切正常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 Safari 开发者工具远程调试真机，检查 submit 按钮的
hit area是否被遮挡；重点看父级是否有pointer-events: none或transform导致层叠上下文异常 - 给 submit 按钮本身加
position: relative和z-index: 1，确保它在最上层 - 避免用
label包裹button，iOS 下这种结构可能导致事件冒泡异常，改用显式for关联或直接放button标签
跨平台表单真正的难点不在写法，而在每个平台对“用户意图”的解读差异——iOS 认为“输完再验”，Android 认为“边输边验”，Chrome 认为“随时可验”。这些底层假设不一致，光靠一套 HTML/CSS/JS 很难覆盖全场景。最稳妥的做法，是把验证逻辑收归 JS，用 checkValidity() 和 reportValidity() 统一触发时机，而不是依赖浏览器的默认行为。
