Search code examples
javascriptjquerybindjquery-eventskeydown

keydown event not working if focus is on other element

I have a form which has multiple textboxes, dropdowns and one checkbox respectively. I want to submit this form If I enter S button on keyboard. Checkbox is not a mandatory field, after dropdown next focus goes to checkbox and If I enter S then the keydown handler is not working.

Following is my code for keydown handler, which I kept in document.ready() method:

$('#submitBtn').bind('keydown', 's', function() {
    alert("S pressed");
    $('#myForm').submit();
});

When the focus is on submit button then only it work, if I moved focus to other element then it wont. I am new to JQuery/Javascript so do not have idea why it is not working.

I can not provide the complete HTML, following markup is pretty much similar:

<html>
    <body>
        <script src="C:/Desktop/test/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#saveBtn').bind('keydown', 's', function() {
                    alert("S pressed :: SaveInfo() function call");
                    //SaveInfo() function call
                });
            });
        </script>
        <div id="saveInfo">
            <ul >
                <li>
                    <div>
                        <input type="text" maxlength="30" tabindex = "1" />
                        <br>
                        <input type="text" maxlength="30" tabindex = "2" />
                        <br>
                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <div>
                        <input type="checkbox" id="checkBox1" value="false" tabindex ="3"/>
                    </div>
                </li>
                <li>
                    <div>
                        <input type="button" name="saveBtn" id="saveBtn" value="Save" tabindex ="4"/>
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>
Solution 

  • $("body").keydown(function(e) {

 
   
      $('#submitBtn').text("Pressed!");
 if(e.keyCode == 83) {
     $('#submitBtn').text("S Pressed!");
   }
    


});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="submitBtn" type="button">press here</button>