第三方脚本会劫持focus/blur或重写outerhtml导致表单异常，需通过删除可疑script、监听focusin事件确认；解决方法包括添加data-no-interfere属性并阻止事件冒泡、禁用全局滚动、避免onchange提交、隔离表单结构及限定dom查询范围。
第三方插件（尤其是压缩过的营销脚本、主题 JS）会直接劫持 focus、blur 或重写 input.outerHTML，导致表单视觉错乱、键盘闪退、状态丢失——这不是 CSS 能修的，必须从事件流和 DOM 生命周期切入。
怎么确认是第三方脚本在干扰表单聚焦
别猜，用浏览器原生能力快速验证：
- 打开 DevTools → Elements 面板，右键删掉疑似脚本（比如
scripts.min.js或带divi-custom-script-jsid 的<script></script>） - 刷新页面，点
<input>—— 如果键盘不再闪退、位置不再偏移，就是它 - 进一步确认：在 Console 执行
document.addEventListener('focusin', e => console.log(e.target), true)，看是否有多余的blur()或preventDefault()日志
为什么 jQuery 或主题脚本会让 input 一闪就消失
它们常在 touchstart 或 click 阶段做两件事：
- 对
input强制调用.focus()，紧接着又调用.blur()（比如为了“重置样式”） - 用
outerHTML = ...替换整个输入框，触发浏览器中断原生键盘管理器 - 监听
change并同步提交整个表单，但没阻止默认跳转，导致页面重载后状态回滚
这些操作在桌面端常被忽略，但在 iOS Safari 和 Android Chrome 中会直接破坏焦点生命周期。
绕过干扰的最小改动方案
不改插件源码，也能稳住表单：
- 给关键
<input>加data-no-interfere="true"属性，然后在页面加载后立即执行：document.querySelectorAll('input[data-no-interfere]').forEach(i => i.addEventListener('focus', e => e.stopPropagation(), true)) - 禁用全局滚动：在
focusin时加document.body.style.overflow = 'hidden'，blur后恢复，防止键盘弹出触发浏览器默认滚动并连带触发脚本逻辑 - 避免用
onchange="submit()"，改用input.addEventListener('change', e => { e.preventDefault(); /* 自定义提交 */ })，确保事件控制权不被外部脚本覆盖
表单结构本身容易被插件破坏的隐蔽点
很多插件会遍历 document.querySelectorAll('form') 或 document.forms，然后批量 patch 提交逻辑。所以：
- 不要让多个独立复选框共用同一个
<form></form>—— 它们本该各自提交，但插件可能把所有checkbox当作一个组处理 - 避免把
<label></label>直接包<input>后再塞进插件容器里；插件常误判label为可交互节点，触发不必要的 focus/blur - 如果插件注入了带
role="application"的 wrapper，立刻用shadowRoot封装你的表单区域——否则它的aria-hidden="true"会把整个<main></main>内容屏蔽掉
最麻烦的不是插件做了什么，而是它做完之后，你原来的 DOM 查询（比如 document.querySelector('.submit-btn')）突然查不到节点了——因为插件挪动了元素，或替换了父容器。所有 JS 操作必须限定在已知稳定上下文内，比如表单自身的 formElement 或 shadowRoot。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
