本文介绍在 Thrive Architect 中为弹窗（lightbox）内的输入框实现自动聚焦的正确方法，解决因动态加载导致 window.onload 失效的问题，并提供基于其原生事件机制的可靠解决方案。
本文介绍在 thrive architect 中为弹窗（lightbox）内的输入框实现自动聚焦的正确方法，解决因动态加载导致 `window.onload` 失效的问题，并提供基于其原生事件机制的可靠解决方案。
Thrive Architect 的弹窗（即 lead box 或 lightbox）内容并非随页面初始加载而渲染，而是通过 JavaScript 动态插入 DOM 并触发显示动画。因此，使用 window.onload 或 DOMContentLoaded 事件无法捕获弹窗中元素的可用时机——此时目标输入框尚未存在于 DOM 中，调用 .focus() 会静默失败。
幸运的是，Thrive Architect 提供了语义明确的自定义事件系统。其中，tve.lightbox.show 是专为弹窗完全渲染并可见后触发的事件，是实现 autofocus 的理想钩子。只需监听该事件，并在回调中安全获取并聚焦输入元素即可。
以下为推荐的完整实现代码（请将 <script></script> 块添加至 Thrive Architect 页面的「自定义 HTML」区域或主题页脚）：
<script>
document.addEventListener('tve.lightbox.show', function() {
const input = document.getElementById("inpt");
if (input) {
input.focus();
// 可选：滚动到输入框顶部（尤其在移动端或长表单中提升体验）
input.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
} else {
console.warn('Autofocus failed: element with ID "inpt" not found in lightbox.');
}
});
</script>
⚠️ 注意事项：
- 确保你的输入框已设置唯一且正确的
id="inpt"（与代码中一致），避免 ID 冲突或拼写错误； - 若使用多个弹窗，且每个弹窗内均有需聚焦的输入框，请确保各输入框 ID 全局唯一，或改用更健壮的选择器（如
querySelector('.tve-form input[type="email"]')）； - 此事件仅在用户主动触发弹窗（如点击按钮）时触发，不适用于页面自动弹出（如时间延迟弹窗），后者需额外监听
tve.lightbox.open或结合setTimeout做兜底； - 在部分浏览器（如 Safari 移动端）中，自动聚焦可能受限于用户交互策略，建议确保弹窗触发动作（如按钮点击）与聚焦逻辑存在直接事件链，以提高兼容性。
综上，依赖 Thrive Architect 原生事件 tve.lightbox.show 是最稳定、最符合框架设计意图的 autofocus 实现方式，既规避了竞态条件，又无需轮询或硬编码延迟，值得作为标准实践集成至转化优化工作流中。
