javascriptjqueryfacebox

jQuery Facebox plugin: Focus the popup appearance

I have an HTML page with facebox popup.

This page contains many links and forms, and the popup contains one form. What I want is, when I open the popup, using only keyboard's buttons, to go directly to the form's inputs of the popup with 'tab' button.

Here is a fiddle --> http://jsfiddle.net/tk1jagpb/ 

$(document).ready(function () {
  $('a[rel*=facebox]').facebox()
})
.popup {
  background-color: mistyrose;
}
<p><a href="#info" rel="facebox">Click to display</a></p>

<div id="info" style="display: none;">
  <p>Popup div</p>
  <p><input type="text" value = "" /></p>
  <p><input type="text" value = "" /></p>
  <p><input type="text" value = "" /></p>
  <p><input type="text" value = "" /></p>
</div>

<p><input type="text" value = "" /></p>
<p><input type="text" value = "" /></p>
<p><input type="text" value = "" /></p>

If it were so, I might use the keyboard without having to click the popup box... It would save my time.

Thanks.

Solution

  • You can listen for the 'reveal.facebox' event which is fired just after the facebox is shown. Once the facebox is shown, just focus the first input field.

    $(document).ready(function() {
    $('a[rel*=facebox]').facebox();
    $(document).bind('reveal.facebox', function() {
        $('.popup input:first').focus();
    });
})