Диалог 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');

Вот скрипка. В этой скрипке,

1. Щелкните любое текстовое поле (означает "фокус". В этом примере это значение, которое мы имеем "проверить здесь").

2. Теперь прокрутите диалоговое окно, щелкнув полосу прокрутки диалогового окна, перетащите его вниз / вверх и посмотрите, что происходит. Это теряет фокус на текстовом поле, которое мы щелкнули. Если я нажимаю клавишу Tab, он снова устанавливает фокус на первое поле. Это странно

Если я использую прокрутку мыши, фокус остается на том же поле. Это нормально.

Честно говоря, я не знаю, почему это происходит. Может кто-нибудь помочь мне, как предотвратить потерю фокуса в диалоге при прокрутке? Я хочу, чтобы фокус был сохранен на том же поле.

Answer 1

Исправлена. Проблема заключается в tabindex,

Я позволю тебе работать на скрипке. Хитрость заключается в удалении 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

Попробуй это; его работа (не нужно добавлять идентификатор или другие селекторы с вводом)

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

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

Answer 4

Это может быть общее решение, но оно должно быть проверено:

var lastFocus;

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

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

Обычно он сохраняет элемент, который был последним в фокусе, и устанавливает его снова, когда вы прокручиваете div. Вы должны расширить это так намеренно blur событие будет работать без фокусировки элемента после прокрутки.

Answer 5

Из-за того, что вы посмотрели в Интернете, кажется, что наиболее жизнеспособный вариант, который у вас есть, - это @pritishvaidya.

Вы должны понимать, что событие фокуса срабатывает, когда что-то нажимается на вашей странице. Это означает, что если вы нажмете на полосу прокрутки, в то время как текстовое поле будет в фокусе, вы поместите эту полосу прокрутки в фокус и потеряете фокус текстового поля.

Я бы посоветовал вам реализовать решение с помощью @pritishvaidya, но добавьте некоторую проверку вокруг него, где вы знаете, какой из элементов управления был в фокусе последним, а затем принудительно сфокусируйтесь на этом, когда фокус полосы прокрутки будет потерян. Это наложит минимальную нагрузку на клиента, а также позволит вам продвинуться вперед в вашем случае использования.

Удачного кодирования!

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