模态框显示时如何自动聚焦输入框？现有代码失效求助

这个问题我之前也碰到过，你现在的代码不生效的核心原因是用错了Bootstrap模态框的触发事件！

你当前使用的show.bs.modal事件，是在模态框开始执行显示动画、但还没完全渲染完成并显示在页面上时触发的。这时候目标输入框可能还没有完全就绪（比如还没被插入到DOM的可见区域），所以调用focus()方法自然不会有效果。

正确的做法是改用shown.bs.modal事件——这个事件会在模态框完全显示完成（包括动画结束）之后才触发，这时候输入框已经完全准备好了，调用focus就能让它自动获取焦点。

修改后的代码如下：

jQuery(document).ready(function($) {
  $('#myModal').on('shown.bs.modal', function() {
    // 用$(this).find()限定在当前模态框内查找，避免全局同名元素干扰
    $(this).find('input[name="myInput"]').focus();
  });
});

另外补充两个小提醒：

• 确保你的选择器input[name="myInput"]是准确的，没有和页面上其他元素重名；
• 如果你的模态框内容是动态加载的，可能还需要在内容加载完成后再调用focus，但大部分静态内容的场景下，上面的代码就足够解决问题了。

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