Wie deaktiviert jQuery UI Dialog den Fokus auf Hintergrundeingaben?

Question

Wenn Sie einen modalen Dialog mit jQuery UI öffnen, werden Sie feststellen, dass Sie bei Verwendung der Tab-Taste auf die Schaltflächen des Dialogfelds fokussieren können, aber alle Eingaben außerhalb des Dialogs ignoriert werden. Ich versuche, das gleiche Verhalten mit jQuery UI Tools Overlay zu erreichen, aber ich bin nicht sicher, wie jQuery UI es tut. Es scheint nicht den Registerindex der Elemente auf -1 zu setzen, und außerdem wäre dies extrem mühsam, da es alle focusierbaren Elemente finden würde, die nicht Teil des Dialogs sind. Dies wäre nicht sehr gut, wenn Sie eine Automatisierung benötigen. Gibt es eine Möglichkeit, alle Elemente der Seite außer einigen wenigen zu deaktivieren?

Answer 1

Das Dialog-Widget behandelt tatsächlich das keypress Ereignis und führt seine eigene Tab Schlüsselverarbeitung aus. Diese Verarbeitung ignoriert Tabable-Elemente außerhalb des Dialogs.

Der entsprechende Quellcode (Zeilen 286 bis 305 in den current version at the time of this post) ist:

// prevent tabbing out of modal dialogs 
if (options.modal) { 
    uiDialog.bind('keypress.ui-dialog', function(event) { 
     if (event.keyCode !== $.ui.keyCode.TAB) { 
      return; 
     } 

     var tabbables = $(':tabbable', this), 
      first = tabbables.filter(':first'), 
      last = tabbables.filter(':last'); 

     if (event.target === last[0] && !event.shiftKey) { 
      first.focus(1); 
      return false; 
     } else if (event.target === first[0] && event.shiftKey) { 
      last.focus(1); 
      return false; 
     } 
    }); 
} 

Beachten Sie, dass TrueBlueAussie Kommentar richtig ist, und dass die Freigabe des Dialogs Widget an dem falschen Ereignis zu binden, verwendet. keydown sollte statt keypress verwendet werden:

uiDialog.bind('keydown.ui-dialog', function(event) { 
    // ... 
}); 

Answer 2

Hier ist der Teil des Codes, der diese Griffe:

// prevent tabbing out of modal dialogs 
this._on(uiDialog, { 
    keydown: function(event) { 
     if (!options.modal || event.keyCode !== $.ui.keyCode.TAB) { 
      return; 
     } 
     var tabbables = $(":tabbable", uiDialog), 
      first = tabbables.filter(":first"), 
      last = tabbables.filter(":last"); 
     if (event.target === last[0] && !event.shiftKey) { 
      first.focus(1); 
      return false; 
     } else if (event.target === first[0] && event.shiftKey) { 
      last.focus(1); 
      return false; 
     } 
    } 
});​ 

Es ist wie jQuery UI sieht fügt einen Filter (:tabbable) an den Selektor-Engine jQuery und wenn die Dialog ist aktiv, es erlaubt nur die Registerkarte zwischen den modal Tables Elmente zu wechseln.

-Code ab: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js