How to handle ENTER button press on JQuery Dialog Box

Question

I am using JQuery Dialog Box.

I have got below code where I am opening my Dialog Box.

  $('#MyLogin').dialog({
                autoOpen: true,
                width: 450,
                modal: true,
                draggable: false,
                title: $('.LoginpopupHeaderText').text(),
                close: function(event, ui) {showSelect();}
            });

When Dialog box is open, there is login button in it, which validate the username and password field in it using click event. Please see below code sample.

    //Login Button Clicked
    $('#loginButton').click(function()
    {   
            //Code goes here
        });

My Login Button is an Image not a button.

Now I want to catch "Enter" button press only when my Login Dialog is open as well as after catching the "Enter" button it should call my "loginButton" click event, so that it will behave like we have clicked the loginbutton on open dialog box.

Please suggest!

Thanks.

Best Regards,

Answer 1

You can check if the button is visible

$('body').keyup(function(e) {
   if ($('#MyLogin').is(':visible') && e.which == 13) {
      //stuff
   }
});

Answer 2

Register a JS function on your "onLoad" event of the div MyLogin e.g.

     <div id="MyLogin" onload="javascript:return checkKeyPress();" />

In checkKeyPress function check if the keyCode is 13 the submit the form e.g. pseudocode

    event.preventDefault() ;
    if (keyCode == 13 )
          frm.submit();

    return false;  

Remember that event.preventDefault and return false line is must, otherwise the KeyPress event will propagate to main form/page. Hope this will help.