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,

单击任意文本框（表示焦点。在本例中，它是我们具有值 "test here" 的文本框）。
现在通过单击对话框的滚动条滚动对话框并将其向下/向上拖动，看看发生了什么。它正在失去对我们单击的文本框的关注。如果我按 Tab，它会再次将焦点设置到第一个字段。这很奇怪。

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

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

Answer 1

我想这可能对你有点帮助。

$('#divWithTheScrollbar').scroll(function() {
    $('#elementLosingFocus').focus();
});

Answer 2

通过在网络上四处查看，您拥有的最可行的选择似乎是@pritishvaidya 添加的选项。

您必须意识到，当在您的页面上单击任何内容时，都会触发焦点事件。这意味着如果您在文本框处于焦点状态时单击滚动条，您将把滚动条置于焦点状态并失去文本框的焦点。

我建议您通过@pritishvaidya 实施该解决方案，但在其周围添加某种验证，以便您知道哪个控件最后处于焦点，然后在滚动条失去焦点时强制关注该控件.这会给客户带来最小的压力，并让您在用例上取得进展。

编码愉快！

Answer 3

试试这个；它的工作原理（不需要使用输入添加 id 或其他选择器）

var focused;
setInterval(function(){
        focused = $(':focus');
},500)

$("#contactContainer").scroll(function(){
       //console.log(focused[0]);
       $(focused).focus();
})

Answer 4

这可能是一个通用的解决方案，但需要进行测试：

var lastFocus;

$(document)
  .on("focus", function(e) { lastFocus = e.target; })

$("#divWithTheScrollbar").scroll(function () {
  if (lastFocus) lastFocus.focus();
})

它通常会保存最后获得焦点的元素，并在您滚动 div 时再次设置它。您需要对其进行扩展，以便有意的 blur 事件在滚动后元素不会再次聚焦的情况下仍然有效。

Answer 5

已修复。问题是 tabindex.

我让你fiddle工作。诀窍是在对话框初始化后删除 tabindex，可以这样做：

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

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

.attr( {

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

从那里删除 tabindex，就这样！

Answer 6

请尝试以下 JavaScript 更新。

https://jsfiddle.net/3q22xLhk/5/ You can check on fiddle

$("#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('');
  }
});
var scrolling = false;
$("#contactContainer").dialog('open');
var lastFocusTextbox = null;
$("#contactContainer input").focus(function() {
  lastFocusTextbox = this;
});

$("#contactContainer").scroll(function(e) {
  scrolling = true;
});


$("#contactContainer").mouseup(function() {
  if (scrolling) {
    if (lastFocusTextbox != null) {
      $(lastFocusTextbox).focus();
    }
    scrolling = false;
  }
});

jQuery 对话框在滚动时失去焦点

jQuery dialog losing focus on scrolling

html

javascript

jquery

jquery-ui

jquery-ui-dialog