输入字段的自动选择在模态中不工作。

问题描述 投票:0回答:1

我有一个用bootstrap创建的网站。我想做的是在模式中自动选择输入字段。

脚本

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 MODAL

      <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> 

谁能给我解释一下这个功能可能存在的问题是什么? 或者有什么方法可以做到这一点?先谢谢你:)

javascript html jquery syntax bootstrap-modal
1个回答
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>
热门问题
推荐问题
最新问题