CODEWITHSUNDEEP
javascriptjquerybindjquery-eventskeydown
milind_db
milind_db

Reputation: 1294

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>

Upvotes: 2

Views: 6100

Answers (5)

Mayank
Mayank

Reputation: 1392

As per your updated question:

You want to trigger the the form.submit() event when ever there is 's' pressed from the keyboard

try the FIDDLE,

It server the issue, you are actually binding the keypress event to #submitBtn but for targeting complete form you have to target All the DOM elements on the forms.

Simply you can achieve this from select document as a selector like following

$(document).ready(function() {
                $(document).bind('keydown', 's', function() {
                    alert("S pressed :: SaveInfo() function call");
                    //SaveInfo() function call
                });
});

Hope it serves your issue.

Thanks

Upvotes: 1

Nisha Salim
Nisha Salim

Reputation: 707

$("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>

Upvotes: 0

Vara Prasad
Vara Prasad

Reputation: 497

Refer this once for the jquery bind() method, you can find that the 2nd paramter is for "An object containing data that will be passed to the event handler". So, you can pass anything in that parameter which will be available for every keydown event triggered.

Try this code

$(document).bind('keydown', '', function(e) {
    if (e.keyCode == 83) {
        $('#myForm').submit();
    }
});

Or you can use .on also to bind events,

$(document).on('keydown', '', function(e) {
    if (e.keyCode == 83) {
        $('#myForm').submit();
    }
});

I have specified 83 i.e key ascii code for the letter 'S'

Upvotes: 0

Ray Lloy
Ray Lloy

Reputation: 171

I thin k it is normal. You put the keyDown event on your button this is the reason why the keDown event is only on your button. Try to replace

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

by

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

In this case the keyDown event is on all your page and not only in the button.

Upvotes: 0

Harry Bomrah
Harry Bomrah

Reputation: 1668

Try this

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

Upvotes: 0

Related Questions