shown.bs.modal中focus()失效的根本原因是modal根节点的tabindex="-1"阻断焦点，且jQuery对象非原生DOM元素；iOS需用户手势同步触发focus，动态内容须等加载完成再聚焦，并配合scrollIntoView确保可见。
为什么shown.bs.modal里调focus()经常没反应
常见现象是：控制台无报错、输入框边框不亮、光标不出现、iOS 键盘死活不弹。根本原因有两个：tabindex="-1"在.modal根节点上阻断了焦点流向；以及 jQuery 对象（如$('#input')）不是 DOM 元素，调的不是原生focus()方法。
必须确认三点：
-
.modal容器不能带tabindex="-1"——检查 HTML 中是否写了<div class="modal" tabindex="-1">，删掉或显式设为tabindex="0" - 必须用原生 DOM 元素调
focus()，比如document.getElementById('myInput').focus()或$('#myInput')[0].focus() - 输入框不能是
disabled、readonly，也不能被display: none或visibility: hidden隐藏
iOS Safari 下键盘不弹的唯一可靠写法
iOS 要求焦点必须由用户手势（click/tap）同步触发，任何异步回调（包括shown.bs.modal）都会被浏览器判定为“非用户驱动”，直接忽略。
正确做法是：在触发按钮的click回调里，先.modal('show')，紧接着立刻调focus()，且确保此时输入框 DOM 已存在：
$('#openBtn').click(function() {
$('#myModal').modal('show');
const input = document.getElementById('searchInput');
if (input) input.focus(); // 同步执行，不加 setTimeout
});
如果 Modal 内容是 AJAX 动态加载的，得等load完成后再调focus()，否则getElementById返回null。
动态内容 Modal 怎么保证输入框已挂载再聚焦
当 Modal 使用data-remote或手动$.load()加载内容时，shown.bs.modal事件触发时内容可能还没插入 DOM，导致focus()找不到目标元素。
稳妥方案是监听内容加载完成事件，再聚焦：
- 用
data-remote时，Bootstrap 会触发loaded.bs.modal（注意：仅 Bootstrap 4+ 支持，旧版需自行监听ajaxSuccess） - 手动
$.load()时，在回调里聚焦：$('#modalBody').load('form.html', () => { $('#myInput')[0]?.focus(); }) - 若输入框是 Vue/React 渲染的，需等框架完成 patch 后再调
focus()，比如 Vue 的this.$nextTick(() => input.focus())
Modal 自动滚动到输入框位置（防遮挡）
单纯聚焦还不够——如果 Modal 弹出时顶部被导航栏挡住，用户仍需手动滚动。这不是焦点问题，而是视口对齐问题。
用scrollIntoView配合shown.bs.modal解决：
$('#myModal').on('shown.bs.modal', function() {
const input = document.getElementById('myInput');
if (input) {
input.scrollIntoView({ block: 'center', inline: 'nearest' });
}
});
关键细节：
- 别用
behavior: 'smooth'，它和 Modal 过渡动画冲突，容易抖动 - 移动端 Safari 地址栏收起会导致
vh变化，用scroll-margin-top比 JS 算偏移更稳：#myInput { scroll-margin-top: 80px; } - 如果输入框在
.modal-body里且内容过长，确保.modal-dialog有max-height和overflow-y: auto，否则滚动的是整个页面而非 Modal 内部
最常被忽略的一点：iOS 上「聚焦」和「滚动」必须分两步做，且滚动必须在聚焦之后、DOM 可见之后立即执行；顺序颠倒或延迟哪怕 1ms，都可能让键盘不弹或滚动失效。
