How to prevent from the keydown event of the enter key in the document when modal is open?

Question

There is a table of item name and certain buttons like New, Edit and Delete. Now on click these buttons, it opens a modal which takes information and has a submit button in it to save changes in database.

I have a keydown event in switch case for enter key in this document which displays the further details of the highlighted item row in a next page.

So what happens is when modal is opened and I swift focus by tab button to the submit button and then click enter on that focused button, the item is submitted but with that directly next page opens with the selected item details which I don't want.

I want that when modal is open the keydown event of the document should be prevented (ie.should not work) and I should be able to submit the modal.

I guess it is clear that what I want. So if their is a to get out of it then please help me out. Your help will be appreciated.

Here is the code to understand it better..

$(document).keydown(function(e){
        switch(e.which){

            /* Enter Key */
            case 13:
                if(localStorage.check_submit != 1){
                    location.assign('estimate_partyitems.php'); */
                    break;
                }

        }
        /* End of Switch Case */
    });
    /* End of Keydown Event */

$("#btn_new").on("click", function(){

        $('#newestimate_modal').on('shown.bs.modal', function () {
            // some code 
            localStorage.check_submit = 1;
        });

        $('#newestimate_modal').on('hidden.bs.modal', function (e) {
            // some code
            localStorage.check_submit = 0;
        });

        /* On Adding the New Estimate */
        $('#newestimate_form').submit(function(event){
            /* 
            preventDefault method cancels the event if it is cancelable
            Here it is used to prevent the form from submitting.
            */
            event.preventDefault();

            // some code and ajax requests

            /* unbind() method removes event handlers from selected elements. */
            $("#newestimate_form").unbind('submit');

        });

    });

Answer 1

You could check whether any of modals are opened on the page before start of keydown event handling. For example

$(document).keydown(function(e) {
  if ('#modal1, #modal2, #modal3').hasClass('in') return;
  // handle keydown event
} 

Use own modals identificators or another selector to define modals, that must lock keydown event handling.

Answer 2

It is probably possible to hack this into place, but I would strongly recommend not doing so and instead handling this in your event handler. Something like

let modalOpen = false;
window.onkeydown(e => {
   if (!modalOpen) {
       // handle the command as normal.
   }
});

Of course there are many fancier/better ways to do this, but this is the basic idea. Future maintainers will thank you later when they are trying to find out why key bindings sometimes mysteriously fail to fire.

Below I have edited the question's example code to reflex this new design. I removed the localStorage bit because it does not seem to be doing anything. localStorage is a special object that acts as a sort of client side database for persisting state in a similar way to cookies.

let modalOpen = false;
$(document).keydown(function(e){
        if (!modalOpen) {
            switch(e.which){

                /* Enter Key */
                case 13:

                    location.assign('estimate_partyitems.php'); */

            }
        }
        /* End of Switch Case */
    });
    /* End of Keydown Event */

$("#btn_new").on("click", function(){

        $('#newestimate_modal').on('shown.bs.modal', function () {
            // some code 
            modalOpen = true;
        });

        $('#newestimate_modal').on('hidden.bs.modal', function (e) {
            // some code
            modalOpen = false;
        });

        /* On Adding the New Estimate */
        $('#newestimate_form').submit(function(event){
            /* 
            preventDefault method cancels the event if it is cancelable
            Here it is used to prevent the form from submitting.
            */
            event.preventDefault();

            // some code and ajax requests

            /* unbind() method removes event handlers from selected elements. */
            $("#newestimate_form").unbind('submit');

        });

    });