focus on field with focus event

Question

I have defined focus event of a form field to open a Jquery UI dialog with options to select. I want that focus should stay on same field for un-interrupted data entry. My requirement is just like as shown by datepicker, user sees datepicker overlay but focus stays on date field so that user can continue to type in the date.

Here is code for relevant field and dialog.

$( "#pmt_code" ).focus(function(){
    $( "#pmtcodes" ).dialog( "open" );
    // Keep focus stayed on this field somehow
  });


$( "#pmtcodes" ).dialog({
    autoOpen: false,
    position: { my: "left top", at: "left bottom", of: $("#pmt_code") },
    closeOnEscape: true,
    open: function(){
      listPmtCodes();
    }        
  });

Here is the Dialog Div with table. I am populating this table using jquery datatable plugin.

<div id="pmtcodes" title="payment Codes">
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="pmtCodesTable">
        <thead>
          <tr>
            <th>Code</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>        
    </div>

cacoroto · Accepted Answer · 2013-01-11T21:08:58.277

0

You must set the focus to your control again on the open callback:

var $pmt_code = $("#pmt_code"),
    $pmtcodes = $("#pmtcodes");

$pmt_code.focus(function(){
    !$pmtcodes.dialog( "isOpen" ) && $pmtcodes.dialog( "open" );
});

$pmtcodes.dialog({
    autoOpen: false,
    position: { 
        my: "left top", 
        at: "left bottom", 
        of: $pmt_code 
    },
    closeOnEscape: true,
    open: function(){
        listPmtCodes();
        setTimeout(function () { // Workaround for Internet Explorer
            $pmt_code.focus(); //<---- Keep focus stayed on this field somehow
        }, 10);
    }
 });

I just changed the code a little to avoid searching on DOM more then once for each element.

You also need to implements the keyup event to catch the ESC pressed to close the dialog:

$pmt_code.keyup(function (e) {
    if (e.keyCode == 27 && $pmtcodes.dialog("isOpen")) // ESC pressed
    {
        $pmtcodes.dialog("close");
    }
});

Check one live here: http://jsfiddle.net/9KuVA/

I hope this can helps

edited Jan 11 '13 at 21:08

answered Jan 11 '13 at 19:17

cacoroto

269
1
5

You are getting me wrong. Default focus for jquery-ui goes to dialog opened, but I want the focus on my form field which opened the dialog on focus. I mean focus on $("#pmt_code") in above example and NOT $("#pmtcodes"). – bvnbhati Jan 11 '13 at 19:33
But that is what the code does, puts the focus on the $("#pmt_code") after the dialog open. Isn't that what you need to do? – cacoroto Jan 11 '13 at 19:42
It is not that simple. Now when I check in firebug control goes back to focus event handler and tries to run dialog open again. Also I do not get focus on form field unless I click there. – bvnbhati Jan 11 '13 at 19:53
Yes, you are right, I forgot that the focus could be called recursively. What about this last edit: $pmt_code.focus(function(){ !$pmtcodes.dialog( "isOpen" ) && $pmtcodes.dialog( "open" ); }); That will open the dialog again just if it is not opened yet – cacoroto Jan 11 '13 at 20:03
Thanks for your help but still it does not show focus on code field, like if I press tab dialog close button is highlighted. So the focus is in dialog only. – bvnbhati Jan 11 '13 at 20:14
Take a look on this runing: http://jsfiddle.net/q53gt/ Could you post some more piece of your code? – cacoroto Jan 11 '13 at 20:19
I checked on jsiddle and it is not the way I want it. I must click in the field and start typing and off course the dialog should appear but should not interrupt focus on field. In case of code suggested by you- I click, dialog appears, I click again to bring focus on field and then I can type. – bvnbhati Jan 11 '13 at 20:41
Weird, for me it works just fine (using Chrome). I just click to get the focus and open the dialog and then I just keep typing without have to click it again. I will check in other browsers to see if I get the same issue as you – cacoroto Jan 11 '13 at 20:53
Here we go, just calling .focus() on IE doesn't work. We have to use settimeout to get it working. Saw on http://stackoverflow.com/a/2600261/1726698 I am going to edit the post again but please thy this out on the meantime: http://jsfiddle.net/q53gt/2/ – cacoroto Jan 11 '13 at 21:01

focus on field with focus event

1 Answers1