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

jQuery dialog losing focus on scrolling

本文关键字：滚动 对话框 失去 jQuery      更新时间：2023-09-26

下面是一个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');

这是小提琴。

  1. 单击任意文本框(表示焦点)。在这个例子中，它的值是"test")

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

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

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

修复。问题是tabindex。

我让你一个小提琴工作。窍门是在对话框初始化之后删除tabindex，它可以这样做:

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

如果你想要这个行为是永久的，你可以编辑jQuery源代码。如果您到达对话框部分，您将看到一个名为_createWrapper的函数。在里面，你可以看到这样的内容:

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

从那里删除tabindex，就这样!

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

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

从网上看了看，似乎最可行的选择是@pritishvaidya添加的。

您必须意识到，当页面上的任何内容被点击时，焦点事件将被触发。也就是说，如果你在文本框处于焦点状态的时候点击滚动条，你会让滚动条处于焦点状态，而失去文本框的焦点。

我建议你通过@pritishvaidya实现解决方案，但在它周围添加某种验证，你知道哪个控件是最后一个焦点，然后在滚动条的焦点丢失时强制焦点。这将给客户端带来最小的压力，并允许您继续使用您的用例。

编码快乐!

试试这个;其工作(不需要添加id或其他选择器与输入)

var focused;
setInterval(function(){
        focused = $(':focus');
},500)
$("#contactContainer").scroll(function(){
       //console.log(focused[0]);
       $(focused).focus();
})

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

var lastFocus;
$(document)
  .on("focus", function(e) { lastFocus = e.target; })
$("#divWithTheScrollbar").scroll(function () {
  if (lastFocus) lastFocus.focus();
})

它通常保存最后一个有焦点的元素，并在滚动div时再次设置它。您需要扩展它，以便在滚动后元素再次聚焦的情况下，有意的blur事件仍然可以工作。

请尝试以下JavaScript更新。

https://jsfiddle.net/3q22xLhk/5/您可以查看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;
  }
});
相关文章：