下面是一个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');
这是小提琴。
单击任意文本框(表示焦点)。在这个例子中,它的值是"test")
现在通过单击对话框的滚动条滚动对话框,并将其向下/向上拖动,看看发生了什么。它失去了我们点击的文本框的焦点。如果我按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;
}
});