Я хотел бы определить, нажал ли пользователь какую-либо клавишу, когда отображается модальный режим. Я попробовал следующий код, но события не запускаются.
Фрагмент кода:
$("#modal_confirmation_dp_change").on('keydown keyup input', function ( e ) {
alert();
});
Если я пытаюсь проверить событие клика, оно срабатывает.
$("#modal_confirmation_dp_change").on('click', function ( e ) {
alert();
});
Я использую модал Twitter начальной загрузки. Я что-то пропустил?
< Сильный > ОТВЕТ : Я нашел решение своей проблемы. Похоже, я не должен указывать на идентификатор модального, так что событие нажатия клавиши будет обнаружено.
3 ответа
Я нашел решение своей проблемы. Похоже, я не должен указывать на идентификатор модального, так что событие нажатия клавиши будет обнаружено.
$(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();
}
}
});
Вы не должны использовать несколько таких событий, потому что они будут запускаться три раза по количеству ваших событий: один для 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">×</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>
Я считаю, что это лучшее решение, чтобы сосредоточиться на моде.
Чтобы сделать это, вы должны добавить параметр tabindex
в ваш модальный контейнер, а затем установить его фокус с помощью JavaScript. После этого он может получать события клавиатуры: https://stackoverflow.com/a/6633271/2873507
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.