结论是：用 shown.bs.modal 事件 + 原生 DOM 元素 focus()，且需移除模态框 tabindex="-1"；iOS 必须在用户点击后同步调用 focus() 并确保输入框可见可交互。
直接给结论：用 shown.bs.modal 事件 + focus() 调用，但必须确保输入框是 DOM 元素（不是 jQuery 对象），且模态框不能带 tabindex="-1" —— 否则在多数浏览器里会失败，iOS 上更是铁定不弹键盘。
为什么 focus() 在模态框里经常没反应
常见错误现象是：代码写了、事件绑了、控制台也没报错，但输入框就是不亮、不选中、键盘不弹。根本原因有两个：
-
tabindex="-1"阻断了焦点流向：Bootstrap 默认给.modal容器加了tabindex="-1"，这会让它“可聚焦但不可 tab 切入”，同时干扰子元素的focus()调用 - jQuery 对象误当 DOM 元素用：比如
$('#myInput').focus()看似没问题，但若该元素尚未渲染完成（如模态框是动态插入或懒加载），或 jQuery 版本较老，实际调用的是 jQuery 的 focus 方法而非原生 DOM 的focus()，后者才真正触发键盘 - iOS Safari 强制要求：焦点必须由用户真实交互（如
click）直接触发，不能靠异步回调、定时器或页面加载后自动执行 —— 所以show.bs.modal事件里调用通常无效，必须用shown.bs.modal
正确写法：绑定 shown.bs.modal 并手动调用原生 focus()
这个事件保证模态框已完全渲染、可见、且处于可交互状态。关键点是拿到 DOM 元素再调用 focus()：
$('#myModal').on('shown.bs.modal', function () {
const input = document.getElementById('myInput');
if (input) {
input.focus();
// 可选：全选已有内容
input.select();
}
});
如果用 jQuery 习惯，必须显式取 DOM 元素：
$('#myModal').on('shown.bs.modal', function () {
$('#myInput')[0]?.focus(); // [0] 是关键
});
使用场景包括：登录弹窗、搜索框、重命名输入、扫码录入等需要立即操作的表单入口。
移动端（尤其 iOS）必须绕开的坑
iOS Safari 不认脚本自动触发的焦点，哪怕你绑在 shown.bs.modal 里也不行 —— 因为该事件本身不是用户直接触发的。真实可行的解法只有一条：
- 把
focus()放进一个紧随用户点击之后的同步调用链里，比如按钮click回调中先 show 模态框，再立刻focus() - 示例：
$('#openModalBtn').click(function () { $('#myModal').modal('show'); // 紧接着，不是等事件，而是直接操作（需确保 DOM 已就位） setTimeout(() => { const input = document.getElementById('myInput'); input?.focus(); }, 10); // 微小延迟让渲染完成，iOS 才认这是“点击后的响应” }); - 避免在
show.bs.modal或loaded.bs.modal（如果有远程加载）里尝试，它们都太早 - 不要依赖
autofocus属性：它只在页面首次加载时生效，对每次打开模态框无效
额外注意：样式和可访问性影响
移除默认聚焦样式（如 box-shadow 或 outline）会影响键盘用户的操作体验，尤其对屏幕阅读器用户。如果你为了“视觉干净”加了：
input:focus {
outline: none;
box-shadow: none;
}
请务必补上替代方案，比如：
- 用
border或背景色变化提供视觉反馈 - 保留
outline仅在键盘导航时显示：@media (prefers-reduced-motion: reduce) { ... }或配合:focus-visible - 别删
tabindex：虽然要删模态框容器的tabindex="-1"，但输入框自己得保持可 tab 进入
最常被忽略的一点：iOS 上即使 DOM 调用了 focus()，若输入框被 CSS 遮挡、visibility: hidden、或父级 overflow: hidden 截断，键盘依然不会弹出 —— 务必确认元素在视口内、未被隐藏、且 display 和 visibility 均为正常值。
