Bootstrap模态框输入框在Chrome中遇后台AJAX请求丢失焦点问题咨询

这问题我之前帮朋友排查过类似的，Chrome在处理Bootstrap模态框和后台AJAX请求的焦点管理上确实有个特殊的小坑——其他浏览器（Firefox/Edge）的焦点逻辑更宽松，但Chrome会在AJAX请求完成后（哪怕请求没修改模态框DOM）意外重置焦点，导致模态框内的输入框失焦。

可能的原因 #

Chrome的浏览器内核在处理异步请求完成时，会有一个隐性的焦点恢复机制，如果页面中存在“可能需要焦点”的元素（比如模态框外的内容），就会把焦点从模态框内移走，而Bootstrap模态框的默认焦点锁定在Chrome里没完全生效。

解决方案 #

给你两个亲测有效的解决思路，按顺序试：

1. 手动记录并恢复焦点

在AJAX请求前后跟踪当前聚焦的输入框，请求完成后强制恢复焦点，这是最直接的办法：

// 先声明变量保存当前聚焦的元素
let activeInput;

// 监听模态框内输入框的焦点事件，记录当前元素
$('#registerModal input, #registerModal textarea').on('focus', function() {
  activeInput = this;
});

// 修改你的AJAX请求，在完成后恢复焦点
$.post("/json-page.htm", {"pp":10}, function(json) {
  // 这里保留你原来的业务逻辑
}).always(function() {
  // 不管请求成功还是失败，只要元素可见就恢复焦点
  if (activeInput && $(activeInput).is(':visible')) {
    activeInput.focus();
  }
}, "json");

注意把#registerModal换成你实际的模态框ID，确保只监听模态框内的输入元素。

2. 禁用Bootstrap模态框的默认焦点锁定

如果第一种方法效果不好，可以试试关闭Bootstrap模态框的自动焦点功能，手动管理焦点：

// 初始化模态框时禁用自动焦点
$('#registerModal').modal({
  focus: false
});

// 模态框显示时，手动聚焦第一个输入框
$('#registerModal').on('shown.bs.modal', function() {
  $(this).find('input:first').focus();
});

这样能避免Bootstrap的焦点逻辑和Chrome的内置机制冲突。

额外检查点 #

• 确认你的AJAX回调里没有修改模态框的DOM结构（比如隐藏/显示元素），这类操作也可能触发Chrome的焦点重置；
• 检查页面有没有其他全局脚本（比如无障碍插件、自定义焦点管理代码），可能和AJAX请求的焦点行为冲突。

内容的提问来源于stack exchange，提问作者user1147712