schränken fokus auf bestimmte div

Question

Ich habe ein Popup div, das viele Kontrollen hat. Wenn ich kontinuierlich auf die Registerkarte drücke, darf der Fokus nicht von der Div-zu-Eltern-Form gehen. Wie kann ich das tun? Danke

Answer 1

In der onblur Ereignis der letzten Steuerung verschiebe den Fokus auf die erste Steuerung innerhalb der div.

Answer 2

versuchen Sie mit einer modal div, wenn Sie unbedingt sicherstellen möchten, dass der Fokus nicht verlassen.

Answer 3

Dies ist nicht möglich, in reinem HTML zu erzwingen.
Es gibt jedoch einige Skripte, die sich darum kümmern. Ich würde dringend empfehlen, einen von ihnen zu verwenden, da es einige Probleme gibt, die angesprochen werden müssen (A dropdown might appear in front of your modal div).

Wenn Sie asp.net verwenden, können Sie die Ajax Control Toolkit, die eine modale Popup-Dialog hat.

Fast jedes anständige Javascript-Framework hat Plugins, um dies auch zu erreichen. Ich geschehe viel mit jQuery arbeiten, die eine Reihe von Plugins, hat diese zu handhaben:

• jQuery-Block UI (http://malsup.com/jquery/block/#dialog)
• jQuery Popup Dialog (http://vision-media.ca/resources/jquery/jquery-popup-plugin-review)
• jQuery modalen Dialogfelder (http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/)
• ... es viel mehr sind bei http://plugins.jquery.com/search/node/popup

gefunden werden, und wenn Sie die Notwendigkeit für Sie zu einer sich selbst zu machen, hier ist eine Anleitung, wie man es tun mit jQuery: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

Viel Glück bei der Suche nach einer Lösung, die Ihnen am besten passt!

Answer 4

Ich habe Mini-Framework basierend auf sammeln Wissen einschließlich Antworten in diesem Beitrag implementiert.

Es verwendet JQuery UI.

Verbesserungen sind willkommen. Hier

ist Rahmenobjekt:

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

Wie man es verwendet:

1) konzentrieren sich auf spezifische div

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

2) zu begrenzen, zu aktivieren, zu deaktivieren

TabLim.deactivate();