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。在這種小提琴，

1. 單擊任意文本框的（手段焦點。在這個例子中它是一個我們有值「測試在這裏」）。

2. 現在通過單擊對話框的滾動條並將其向下/向上拖動並查看發生了什麼來滾動對話框。它放鬆了我們點擊的文本框的焦點。如果我按標籤，它將焦點再次設置到第一個字段。這很奇怪。

如果我用鼠標滾動，焦點仍然在同一個字段上。這個是正常的。

坦率地說，我不知道爲什麼會發生這種情況。有人可以幫助我如何防止滾動時丟失焦點的對話框？我希望把焦點保留在同一個領域。

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

我想這可能會對你有所幫助。

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

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; 
    } 
});