jQuery Facebox插件：聚焦弹出外观

Question

我有一个带有 facebox 弹出窗口的 HTML 页面。

此页面包含许多链接和表单，弹出窗口包含一个表单。我想要的是，当我仅使用键盘按钮打开弹出窗口时，使用 'tab' 按钮直接转到弹出窗口的表单输入。

这是一个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>

如果是这样，我可能会使用键盘而不必单击弹出框...这会节省我的时间。

谢谢。

Answer 1

您可以收听 'reveal.facebox' event，它是在显示 facebox 后立即触发的。显示facebox后，只需关注第一个输入字段。

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

jQuery Facebox插件：聚焦弹出外观

jQuery Facebox plugin: Focus the popup appearance

javascript

jquery

facebox