jQuery 在 Twitter Bootstrap 模态框中自动聚焦输入框

在本文中，我们将介绍在 Twitter Bootstrap 模态框中如何实现自动聚焦输入框的功能，并提供相关的示例代码。

阅读更多：jQuery 教程

什么是 Twitter Bootstrap 模态框？

Twitter Bootstrap 是一个流行的前端开发框架，提供了丰富的组件和样式，可以帮助开发者快速构建现代化的网页界面。其中模态框（Modal）是一种常用的弹出式窗口，用于显示临时内容，如表单、消息等。

为什么需要自动聚焦输入框？

在某些情况下，我们进入模态框页面后希望能够自动聚焦到某个输入框上，提高用户体验。例如，在登录模态框中，我们希望用户进入页面后能够立即输入用户名和密码，而不需要手动点击输入框。

实现自动聚焦输入框的方法

下面我们介绍两种实现自动聚焦输入框的方法，分别使用 jQuery 和 JavaScript：

使用 jQuery 实现自动聚焦输入框

首先，在模态框的 HTML 代码中，通过给要聚焦的输入框添加唯一的 id 属性，例如：

<input type="text" id="username" placeholder="请输入用户名" />

然后，在页面加载完成后，使用 jQuery 的 .focus() 方法将焦点聚焦到该输入框上，示例代码如下：

$(document).ready(function(){
  $('#myModal').on('shown.bs.modal', function(e){
    $('#username').focus();
  });
});

上述代码中，#myModal 是模态框的 id，shown.bs.modal 是 Bootstrap 模态框的一个事件，表示模态框已经完全显示。

使用 JavaScript 实现自动聚焦输入框

如果你不想使用 jQuery，也可以使用纯 JavaScript 来实现自动聚焦输入框的功能。示例代码如下：

document.addEventListener('DOMContentLoaded', function(){
  var modal = document.getElementById('myModal');
  modal.addEventListener('shown.bs.modal', function(e){
    var username = document.getElementById('username');
    username.focus();
  });
});