detect key press on modal dialog not working

Question

I would like to detect whether the user has pressed any key when a modal is shown. I tried the following code but the events are not fired.

Code snippet:

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

If I try to test click event, it is fired.

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

I am using twitter bootstrap modal. Am I missing something?

ANSWER: I found the solution to my problem. It seems like I should not point to the id of the modal so that the keypress event will be detected.

how is the modal created? have you put a breakpoint in the event to see if it is fired? — BenG, Dec 18 '15 at 08:12
I am using twitter bootstrap modal. I tried putting a breakpoint in that function but it was not fired. Click event, on the other hand, is fired. — Marss, Dec 18 '15 at 08:15
this should help http://stackoverflow.com/questions/34315820/jquery-script-adding-id-and-using-it-doesnt-work/34316271#34316271 — BenG, Dec 18 '15 at 08:18

score 4 · Accepted Answer · edited Jul 12 '18 at 13:21

I found the solution to my problem. It seems like I should not point to the id of the modal so that the keypress event will be detected.

$(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();
                }
        }
    });

Jai · Answer 2 · 2015-12-18T08:42:20.883

You should not use multiple events like this, because it would fire three times as per count of your events one for keydown and for keyup and one for input. Still this is not issue, the issue is the click you are triggering. That is the event of jQuery event object, While you need to fire the click on the DOM.

You should fire the native .click() event of 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>

score 0 · Answer 3 · answered Jul 18 '19 at 14:22

I find it a better solution to give focus to the modal.

In order to do that, you have to add a tabindex parameter to your modal container, and then set its focus using JavaScript. Once that's done it can receive keyboard events: https://stackoverflow.com/a/6633271/2873507

detect key press on modal dialog not working

3 Answers3

Linked