Диалоговое окно jQuery, теряющее ориентацию на прокрутку

У меня есть диалоговое окно 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. В этой скрипке

Щелкните любое текстовое поле (означает "фокус". В этом примере это значение имеет значение "test here" ).
Теперь прокрутите диалог, щелкнув полосу прокрутки диалогового окна и перетащите ее вверх/вниз и посмотрите, что происходит. Это теряет фокус на текстовом поле, которое мы нажали. Если я нажимаю вкладку, она снова устанавливает фокус на первое поле. Это странно.

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

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

Ответ 1

Фиксированный. Проблема заключается в tabindex.

Я позволю вам работать fiddle. Трюк удаляет tabindex сразу после инициализации диалога, это можно сделать следующим образом:

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

Если вы хотите, чтобы это поведение было постоянным, вы можете редактировать исходный код jQuery. Если вы дойдете до раздела диалога, вы увидите функцию с именем _createWrapper. Внутри вы можете увидеть что-то вроде этого:

.attr( {

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

Удалите табуиндекс и все это!

Ответ 2

Я думаю, это может помочь вам немного.

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

Ответ 3

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

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

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

Счастливое кодирование!

Ответ 4

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

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

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

Ответ 5

Это может быть общее решение, но его необходимо протестировать:

var lastFocus;

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

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

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

Ответ 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;
  }
});