Bootstrap 4模态框打开时自动聚焦输入框的实现求助

我明白你遇到的问题了——直接用Bootstrap 4官方文档里的基础模态框代码，确实没法让输入框自动聚焦。踩过这个坑的我告诉你，关键是要抓住模态框完全显示后的那个时机来执行聚焦操作，下面是完整的可运行示例：

完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Modal Auto Focus</title>
    <!-- 引入Bootstrap 4 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>

<!-- 模态框触发按钮 -->
<button type="button" class="btn btn-primary mt-5 ml-5" data-toggle="modal" data-target="#exampleModal">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">测试模态框</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 需要自动聚焦的输入框 -->
        <input type="text" class="form-control" id="focusInput" placeholder="我会自动获取焦点">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

<!-- 引入jQuery和Bootstrap 4 JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
// 监听模态框完全显示的事件
$('#exampleModal').on('shown.bs.modal', function () {
  // 找到输入框并聚焦
  $('#focusInput').focus();
});
</script>

</body>
</html>

关键说明 #

• 必须使用shown.bs.modal事件，而不是show.bs.modal：前者是模态框完全渲染并显示后触发的，这时候输入框已经处于可交互状态；后者是模态框刚开始显示但还没完全渲染完成时触发的，这时候聚焦会失效。
• 确保jQuery和Bootstrap的JS文件正确引入，因为Bootstrap 4依赖jQuery来处理事件。

你直接把这段代码保存成HTML文件打开，点击按钮打开模态框，输入框就会自动获取焦点了。

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