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。在那个小提琴中，

单击任何文本框（表示焦点。在此示例中，我们将其值为“此处测试”）。
现在通过单击对话框的滚动条滚动对话框并向下/向上拖动它，看看发生了什么。它忽略了我们点击的文本框。如果我按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，这就是全部！

Answer 2

我认为这可能对你有所帮助。

select

Answer 3

从网上浏览过来看，你最可行的选择就是添加@pritishvaidya。

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

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

快乐的编码！

Answer 4

试试这个;它的工作（没有必要添加id或其他选择器与inpus）

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

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

Answer 5

这可能是一般解决方案，但需要进行测试：

var lastFocus;

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

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

它通常会保存哪个元素最后具有焦点，并在滚动div时再次设置它。你需要对它进行扩展，以便故意blur事件仍然可以在滚动后不再重新聚焦元素的情况下工作。

Answer 6

请尝试以下JavaScript更新。

https://jsfiddle.net/3q22xLhk/5/你可以查看小提琴

$("#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对话框失去了对滚动的关注

6 个答案: