javascript - jQuery 对话框失去对滚动的关注

Question

我在下面有一个 jQuery 对话框。我正在使用 jQuery UI 1.11。

$("#contactContainer").dialog({
  closeOnEscape: false,
  modal: true,
  dialogClass: 'contactsFooter', 
  open: function(event, ui) {
    $(".ui-dialog-titlebar-close").show();
    $('#dialog_footer').remove();
    $(".contactsFooter").append('<div class="" id="dialog_footer"><div class="dialog-footer-buttons"><button type="button" id ="close" class="button-style-2" onclick="$(\'#hasChangedForm\').val(\'\');" style="margin-left: 5px;">Cancel</button></div></div>');
  },
  autoOpen: false,          
  width: 300,
  minHeight: 'auto',
  maxHeight: 400,
  position: { my: 'top', at: 'top+50' },
  close:function() {
    $('#contactContainer').dialog("option", "position", { my:"top", at:"top+50", of: window });
    $('#contactContainer').html('');
  }
}); 

$("#contactContainer").dialog('open');

这是 Fiddle .在那个 fiddle 里，

1. 单击任意文本框(表示焦点。在本例中，它是我们具有值“test here”的文本框)。

2. 现在通过单击对话框的滚动条滚动对话框并将其向下/向上拖动，看看发生了什么。它正在失去对我们单击的文本框的关注。如果我按 Tab，它会再次将焦点设置到第一个字段。这很奇怪。

如果我使用鼠标滚动，焦点仍然在同一个字段上。这是正常的。

坦率地说，我不知道为什么会这样。有人可以帮助我如何防止对话框在滚动时失去焦点吗？我希望焦点保留在同一字段上。

Answer 1

已修复。问题是 tabindex。

我给你一个fiddle在职的。诀窍是在对话框初始化后删除 tabindex，可以这样做:

$(".ui-dialog.ui-widget").removeAttr("tabindex")

如果您希望此行为永久有效，您可以编辑 jQuery 源代码。如果您到达对话框部分，您将看到一个名为 _createWrapper 的函数。在里面，你可以看到这样的东西:

.attr( {

            // Setting tabIndex makes the div focusable
            tabIndex: -1,
            role: "dialog"
        } )

从那里删除 tabindex，就这样!