ограничить фокус на конкретном div

Question

У меня есть всплывающее окно с большим количеством элементов управления. Если я постоянно нажимаю на вкладку, фокус не должен уходить из div в родительскую форму. Как это сделать? Thanks

Answer 1

В onblur Событие последнего управления перемещает фокус на первый элемент управления внутри div.

Answer 2

попробуйте использовать modal div, если вы хотите абсолютно убедиться, что фокус не уходит.

Answer 3

Это невозможно выполнить в виде простого HTML.
Есть, однако, несколько сценариев, которые позаботятся об этом для вас. Я бы настоятельно рекомендовал использовать один из них, поскольку есть некоторые проблемы, которые необходимо решить (A dropdown might appear in front of your modal div).

Если вы используете asp.net, вы можете проверить инструментарий управления ajax, который имеет модальное всплывающее диалоговое окно.

Практически каждый приличный javascript framework имеет плагины для выполнения этого. Я случайно много работать с JQuery, который имеет ряд плагинов для обработки этого:

• JQuery Блок интерфейса (http://malsup.com/jquery/block/#dialog)
• JQuery Popup Dialog (http://vision-media.ca/resources/jquery/jquery-popup-plugin-review)
• JQuery модальные диалоговые окна (http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/)
• ... есть намного больше, чтобы найти на http://plugins.jquery.com/search/node/popup

И если вы обнаружите необходимость сделать его самостоятельно, вот учебник о том, как это сделать используя jQuery: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

Удачи вам в поиске решения, которое вам подходит лучше всего!

Answer 4

Я реализовал мини-рамки на основе сбора знаний, включая ответы в этом посте.

Он использует интерфейс JQuery.

Усовершенствования приветствуются.

Вот основа объекта:

var TabLim = {}; 

TabLim.activate = function(el) { 
    TabLim.deactivate(); 

    TabLim._el = el; 

    $(window).on('keydown', TabLim._handleTab); 

    return TabLim; 
}; 

TabLim.deactivate = function() { 
    TabLim._el = null; 

    // detach old focus events 
    TabLim._detachFocusHandlers(); 

    TabLim._els = null; 
    TabLim._currEl = null; 

    $(window).off('keydown', TabLim._handleTab); 

    return TabLim; 
}; 

TabLim.setFocus = function(prev) { 
    // detach old focus events 
    TabLim._detachFocusHandlers(); 

    // scan for new tabbable elements 
    var tabbables = TabLim._el.find(':tabbable'); 
    TabLim._els = []; 

    // wrap elements in jquery 
    for (var i = 0; i < tabbables.length; i++) { 
     var el = $(tabbables[i]); 
     // set focus listener on each element 
     el.on('focusin', TabLim._focusHandler); 
     TabLim._els.push(el); 
    } 

    // determine the index of focused element so we will know who is 
    // next/previous to be focused 
    var currIdx = 0; 
    for (var i = 0; i < TabLim._els.length; i++) { 
     var el = TabLim._els[i]; 

     // if focus is set already on some element 
     if (TabLim._currEl) { 
      if (TabLim._currEl === el[0]) { 
       currIdx = i; 

       prev ? currIdx-- : currIdx++; 
       break; 
      } 

     } else { 
      // focus is not set yet. 
      // let's set it by attribute "autofocus". 
      if (el.attr('autofocus') !== undefined) { 
       currIdx = i; 
       break; 
      } 
     } 
    } 

    if (currIdx < 0) { 
     currIdx += TabLim._els.length; 
    } 
    if (TabLim._els.length) { 
     TabLim._els[Math.abs(currIdx % TabLim._els.length)].focus(); 
    } 

    return TabLim; 
}; 

TabLim._handleTab = function(e) { 
    if (e.which === 9) { 
     e.preventDefault(); 

     TabLim.setFocus(e.shiftKey); 
    } 
}; 

TabLim._focusHandler = function(e) { 
    TabLim._currEl = e.currentTarget; 
}; 

TabLim._detachFocusHandlers = function() { 
    if (TabLim._els) { 
     for (var i = 0; i < TabLim._els.length; i++) { 
      TabLim._els[i].off('focusin', TabLim._focusHandler); 
     } 
    } 
}; 

Как использовать:

1), чтобы активировать, чтобы ограничить фокус на конкретных DIV

TabLim.activate($('.yourDic')).setFocus(); 

2), чтобы отключить

TabLim.deactivate();