library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Dialog: Keep focus inside modal dialog, by handling focus events on elements outside of it

Browse Source
This commit is contained in:
Jörn Zaefferer 2012-10-26 10:59:41 -04:00
parent 2a887e4321
commit 8ee8046c02
1 changed files with 32 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
ui/jquery.ui.dialog.js vendored
View File

@ -282,8 +282,7 @@ $.widget("ui.dialog", {
return; return;
} }
var hasFocus, var options = this.options,
options = this.options,
uiDialog = this.uiDialog; uiDialog = this.uiDialog;
this.opener = $( this.document[ 0 ].activeElement ); this.opener = $( this.document[ 0 ].activeElement );
@ -294,16 +293,7 @@ $.widget("ui.dialog", {
this.moveToTop( null, true ); this.moveToTop( null, true );
this._show( uiDialog, options.show ); this._show( uiDialog, options.show );
// set focus to the first tabbable element in the content area or the first button this._focusTabbable();
// if there are no tabbable elements, set focus on the dialog itself
hasFocus = this.element.find( ":tabbable" );
if ( !hasFocus.length ) {
hasFocus = this.uiDialogButtonPane.find( ":tabbable" );
if ( !hasFocus.length ) {
hasFocus = uiDialog;
}
}
hasFocus.eq( 0 ).focus();
this._isOpen = true; this._isOpen = true;
this._trigger( "open" ); this._trigger( "open" );
@ -312,13 +302,26 @@ $.widget("ui.dialog", {
return this; return this;
}, },
_focusTabbable: function() {
// set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself
var hasFocus = this.element.find( ":tabbable" );
if ( !hasFocus.length ) {
hasFocus = this.uiDialogButtonPane.find( ":tabbable" );
if ( !hasFocus.length ) {
hasFocus = this.uiDialog;
}
}
hasFocus.eq( 0 ).focus();
},
_keepFocus: function( event ) { _keepFocus: function( event ) {
function checkFocus() { function checkFocus() {
var activeElement = this.document[ 0 ].activeElement, var activeElement = this.document[ 0 ].activeElement,
isActive = this.uiDialog[ 0 ] === activeElement || isActive = this.uiDialog[ 0 ] === activeElement ||
$.contains( this.uiDialog[ 0 ], activeElement ); $.contains( this.uiDialog[ 0 ], activeElement );
if ( !isActive ) { if ( !isActive ) {
this.uiDialog.focus(); this._focusTabbable();
} }
} }
event.preventDefault(); event.preventDefault();
@ -659,6 +662,22 @@ $.extend( $.ui.dialog.overlay, {
// reuse old instances due to IE memory leak with alpha transparency (see #5185) // reuse old instances due to IE memory leak with alpha transparency (see #5185)
oldInstances: [], oldInstances: [],
create: function( dialog ) { create: function( dialog ) {
if ( this.instances.length === 0 ) {
// prevent use of anchors and inputs
// we use a setTimeout in case the overlay is created from an
// event that we're going to be cancelling (see #2804)
setTimeout(function() {
// handle $(el).dialog().dialog('close') (see #4065)
if ( $.ui.dialog.overlay.instances.length ) {
$( document ).bind( "focusin.dialog-overlay", function( event ) {
if ( !$( event.target ).closest( ".ui-dialog").length ) {
event.preventDefault();
$( ".ui-dialog:visible:last .ui-dialog-content" ).data( "ui-dialog" )._focusTabbable();
}
});
}
}, 1 );
}
var $el = ( this.oldInstances.pop() || $( "<div>" ).addClass( "ui-widget-overlay ui-front" ) ); var $el = ( this.oldInstances.pop() || $( "<div>" ).addClass( "ui-widget-overlay ui-front" ) );