jq bootstrap模态框弹出同时模态框中输入框获取焦点方法_boostrap模态框弹出文本框获取光标-优快云博客

本文介绍了一个使用jQuery实现的按钮点击事件，该事件触发一个包含输入框和确定按钮的大尺寸模态框弹出。模态框弹出时，输入框会自动获得焦点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.点击的按钮：

<button class="btn btn-primary" id="connectionBtn"> 书/码关联</button>

2.模态框：

 <div aria-labelledby="myModalLabel" class="modal fade bs-example-modal-lg" id="connection" role="dialog" >
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                        <span aria-hidden="true">
                            ×
                        </span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                      测试
                    </h4>
                </div>
                <div class="modal-body" id="modalBody">
                  <input type="text" name="" class="form-control" id="scanISBN" placeholder="测试">
                  <input type="submit" name="" id="finishISBN" class="btn btn-primary" value="确定">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" type="button">
                      关闭
                    </button>
                </div>
            </div>
        </div>
      </div>

3.jq事件：

$("#connectionBtn").click(function() {//点击按钮
  $("#connection").modal("show");//打开模态框

  $('#connection').on('shown.bs.modal', function () {
       $("#connection #scanISBN").focus();//获取焦点
  });

});