输入字段上的自动 select 在模态内不起作用

Question

我在 bootstrap 上创建了一个网站。我想做的是我想自动 select 模式内的输入字段。

脚本

function click_qty_edit(){

       $('#modal_edit_qty_2').modal('show');

       /* I have tried this on JavaScript but nothings work :( */ 
          var input_auto = document.getElementById('edit_2_qty');
          input_auto.focus();
          input_auto.select();
       /* Then, I've tried also on jQuery and nothing happens again :( */
          $('#edit_2_qty').focus().select(); 

}

HTML 模态

      <div id="modal_edit_qty_2" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="classInfo" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width:350px;">
          <div class="modal-content">
            <div class="modal-header">
              <div>
                <span class="text-primary">Enter New Quantity</span>
              </div>
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="outline:none;">
                ×
              </button>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-12">
                  <input type="number" id="edit_2_qty"  style="width:100%;text-align:center;border:1px #9124A3 solid;padding:10px;border-radius:8px;">
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" onclick="save_edit_qty_2()">Save</button>
            </div>
          </div>
        </div>
      </div>

谁能给我解释一下这个函数可能存在的问题是什么？或者有什么办法可以做到这一点？提前致谢:)

Answer 1

您可以添加一个触发器，以便在显示模式时光标在输入字段上处于活动状态

$(document).ready(function(){
$('#modal_edit_qty_2').modal('show');
});

$('#modal_edit_qty_2').on('shown.bs.modal', function () {
    $('#edit_2_qty').focus();
}); 

function click_qty_edit() {

  $('#modal_edit_qty_2').modal('show');
  document.getElementById(edit_2_qty).autofocus;

  /* I have tried this on JavaScript but nothings work :( */
  var input_auto = document.getElementById('edit_2_qty');
  input_auto.focus();
  input_auto.select();
  /* Then, I've tried also on jQuery and nothing happens again :( */
  $('#edit_2_qty').focus().select();

}

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>

<div id="modal_edit_qty_2" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="classInfo" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width:350px;">
          <div class="modal-content">
            <div class="modal-header">
              <div>
                <span class="text-primary">Enter New Quantity</span>
              </div>
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="outline:none;">
                ×
              </button>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-12">
                  <input type="number" id="edit_2_qty"  style="width:100%;text-align:center;border:1px #9124A3 solid;padding:10px;border-radius:8px;">
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" onclick="save_edit_qty_2()">Save</button>
            </div>
          </div>
        </div>
      </div>

输入字段上的自动 select 在模态内不起作用

Auto select on input field doesn't work inside the modal

html

javascript

syntax

jquery

bootstrap-modal