jQuery對話框失去焦點滾動

我在下面有一個jQuery對話框。我使用的是jQuery UI 1.11。jQuery對話框失去焦點滾動

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

單擊任意文本框的（手段焦點。在這個例子中它是一個我們有值「測試在這裏」）。
現在通過單擊對話框的滾動條並將其向下/向上拖動並查看發生了什麼來滾動對話框。它放鬆了我們點擊的文本框的焦點。如果我按標籤，它將焦點再次設置到第一個字段。這很奇怪。

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

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

來源

2016-09-14 Lingasamy Sakthivel

固定。問題是tabindex。

我讓你fiddle工作。訣竅是去除tabindex只是對話框的初始化後，就可以這樣做：

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

如果你想這種行爲是永久性的，你可以編輯jQuery的源代碼。如果您到達對話框部分，您將看到一個名爲_createWrapper的功能。在裏面，你可以看到這樣的事情：

.attr({ 

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

從那裏取出tabindex屬性，而這一切！

來源

2016-09-16 08:43:23

這很有趣..「tabindex」有什麼問題。你可以解釋嗎？ –

我記得正確的解釋，因爲幾個月前我必須處理這個問題。但是滾動條被放置在'$（「。ui-dialog」）'padding上，所以，當你點擊滾動條時就像點擊容器一樣，這會導致你失去焦點。刪除tabindez會使元素不可聚焦，因此當您點擊它時，不會失去對輸入的關注。然後，在某些地方，我不記得JQuery UI有正確的處理程序，以正確的方式重新添加可聚焦屬性。 –

是的，你是對的！問題是'tabindex'，但在我的情況下，我無法刪除它，因爲只有當我們添加'tabindex'時，默認的瀏覽器導航操作（空格鍵和shift +空格鍵）才能在彈出窗口中工作。如果我們在對話框中按下shift +空格鍵時刪除了'tabindex'，它將僅滾動背景屏幕而不是對話框 –

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

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

來源

2016-09-14 08:38:58

好主意，但我並不想用這個對所有對話框我有。需要知道爲什麼在JQuery對話框中發生這種情況。沒有？ –

從在網上看了看，似乎最有可行的選擇是你添加了一個@pritishvaidya。

你必須認識到，當你點擊頁面上的任何東西時，觸發焦點事件。這意味着如果您在讓文本框處於焦點狀態時單擊滾動條，則會將該滾動條放在焦點上並失去文本框的焦點。

我建議你通過@pritishvaidya實現解決方案，但是在它的周圍添加一些驗證，你知道哪個控件最後被關注，然後在滾動條焦點丟失時強制重點關注。這會給客戶帶來最小的壓力，並且可以讓您在使用情況下取得進展。

快樂編碼！

來源

2016-09-16 08:30:25 geostocker

你是對的'當你點擊頁面上的任何東西時，觸發焦點事件。這意味着如果您在將文本框放在焦點上的同時單擊滾動條，則會將該滾動條放在焦點上並失去文本框的焦點。但是，當我按下標籤頁時，這裏重點是再次設置到第一個字段。這很奇怪。沒有？ –

試試這個;其工作（不需要添加ID或其他選擇與inpus）

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

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

來源

2016-09-16 08:32:33

這不是問題的理想解決方案 –

這可能是一個通用的解決方案，但它需要進行測試：

var lastFocus; 

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

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

它通常可以節省哪個元素有集中最後並在滾動div時再次設置它。您需要對其進行擴展，以便有意識的blur事件仍然可以在滾動後不再次聚焦的情況下工作。

來源

2016-09-16 08:33:14 Christoph

請嘗試以下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; 
    } 
});

來源

2016-09-16 08:57:46 Mitul

jQuery對話框失去焦點滾動

回答

相關問題