jQuery Facebox插件：集中显示弹出窗口

Question

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.

Answer 1

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();
    });
})