обнаружить нажатие клавиши в модальном диалоге не работает

Question

Я хотел бы определить, нажал ли пользователь какую-либо клавишу, когда отображается модальный режим. Я попробовал следующий код, но события не запускаются.

Фрагмент кода:

   $("#modal_confirmation_dp_change").on('keydown keyup input', function ( e ) {
         alert();
        });

Если я пытаюсь проверить событие клика, оно срабатывает.

   $("#modal_confirmation_dp_change").on('click', function ( e ) {
            alert();
        });

Я использую модал Twitter начальной загрузки. Я что-то пропустил?

< Сильный > ОТВЕТ : Я нашел решение своей проблемы. Похоже, я не должен указывать на идентификатор модального, так что событие нажатия клавиши будет обнаружено.

javascript jquery html modal-dialog

2

Marss 18 Дек 2015 в 11:07

Answer 1

Я нашел решение своей проблемы. Похоже, я не должен указывать на идентификатор модального, так что событие нажатия клавиши будет обнаружено.

$(document).on('keydown keyup input click',  function (e) {
if($('#modal_confirmation_dp_change').is(':visible')) {
            var key = e.which;
                if (key == 13) { //This is an ENTER 
                    $('#changed_dp_ok').click();
                }
        }
    });

4

Community 12 Июл 2018 в 13:21

Answer 2

Вы не должны использовать несколько таких событий, потому что они будут запускаться три раза по количеству ваших событий: один для keydown и keyup, а другой для input. Тем не менее, это не проблема, проблема в том, что click вы запускаете. Это событие объекта события jQuery, хотя вам нужно запустить click в DOM.

Вы должны запустить нативное .click() событие DOM:

$("#modal_confirmation_dp_change").on('keydown', function ( e ) {
    var key = e.which || e.keyCode;
    if (key == 13) {
        $('#changed_dp_ok')[0].click(); // <----use the DOM click this way!!!
    }
});

$(document).on('keydown', function(e) {
  if (e.which == 13) {
    //$('.btn').click();  // <----this wont work
    $('.btn')[0].click(); // <---but this works
  }
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

0

Jai 18 Дек 2015 в 08:42

Answer 3

Я считаю, что это лучшее решение, чтобы сосредоточиться на моде.

Чтобы сделать это, вы должны добавить параметр tabindex в ваш модальный контейнер, а затем установить его фокус с помощью JavaScript. После этого он может получать события клавиатуры: https://stackoverflow.com/a/6633271/2873507

0

Vic Seedoubleyew 18 Июл 2019 в 14:22

обнаружить нажатие клавиши в модальном диалоге не работает

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript