Автоматический выбор в поле ввода не работает внутри модального окна

Question

У меня есть сайт, созданный bootstrap. Я пытаюсь сделать автоматический выбор поля ввода внутри модального окна.

SCRIPT

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> 

Может ли кто-нибудь объяснить мне, в чем была возможная проблема с этой функцией? или есть способ сделать это? Заранее спасибо :)

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>