javascript–如何强制关注网页上的模式框

TL; DR;

有没有办法强制焦点在网页的模态框内？

问题出在这里：我有一个经典的网页,包含文字,链接和表格.当我单击页面中的一个特定链接时,会出现一个模式框(类似于fancybox或jQuery.ui.dialog).此模式还包含链接和表单元素.如果用户使用其“tab”键,他可以将页面上的每个元素,模态内部的元素以及其外部的元素都集中在一起.我想强调焦点在模态框内说,但我找不到办法.如果可能的话,我想用CSS或Javascript来做这件事.

我知道这是可能的,因为jQuery.ui.dialog可以使用模态选项来完成,这里是一个示例http://jsfiddle.net/pomeh/QjLJk/1/show/.我试着查看源代码,但我不知道它是如何工作的.这里是我在jQuery UI源代码中找到的一些代码,听起来像解决了这个问题：

this.document.bind( "focusin.dialog", function( event ) {
if ( !that._allowInteraction( event ) ) {
event.preventDefault();
$(".ui-dialog:visible:last .ui-dialog-content")
.data( widgetFullName )._focusTabbable();
}
});
_allowInteraction: function( event ) {
if ( $( event.target ).closest(".ui-dialog").length ) {
return true;
}
// TODO: Remove hack when datepicker implements
// the .ui-front logic (#8989)
return !!$( event.target ).closest(".ui-datepicker").length;
},
_focusTabbable: function() {
// Set focus to the first match:
// 1. First element inside the dialog matching [autofocus]
// 2. Tabbable element inside the content element
// 3. Tabbable element inside the buttonpane
// 4. The close button
// 5. The dialog itself
var hasFocus = this.element.find("[autofocus]");
if ( !hasFocus.length ) {
hasFocus = this.element.find(":tabbable");
}
if ( !hasFocus.length ) {
hasFocus = this.uiDialogButtonPane.find(":tabbable");
}
if ( !hasFocus.length ) {
hasFocus = this.uiDialogTitlebarClose.filter(":tabbable");
}
if ( !hasFocus.length ) {
hasFocus = this.uiDialog;
}
hasFocus.eq( 0 ).focus();
}
keydown: function( event ) {
if ( this.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
event.keyCode === $.ui.keyCode.ESCAPE ) {
event.preventDefault();
this.close( event );
return;
}
// prevent tabbing out of dialogs
if ( event.keyCode !== $.ui.keyCode.TAB ) {
return;
}
var tabbables = this.uiDialog.find(":tabbable"),
first = tabbables.filter(":first"),
last = tabbables.filter(":last");
if ( ( event.target === last[0] || event.target === this.uiDialog[0] ) && !event.shiftKey ) {
first.focus( 1 );
event.preventDefault();
} else if ( ( event.target === first[0] || event.target === this.uiDialog[0] ) && event.shiftKey ) {
last.focus( 1 );
event.preventDefault();
}
}


解决方法:

我已经拥有代码了,我不会进入编码,我会向你解释它背后的逻辑.

如果您的页面包含以下元素,

element0(tabindex 1) – > element1(tabindex 2) – > element2(tabindex 3)

为了防止焦点消失,你基本上创建了一个循环.

当在element0上按下tab键时,它会像往常一样进入element1.

但是当在element2上按下tab键时,你需要阻止浏览器的默认行为(通过event.preventDefault()),即转到具有更高tabindex的元素并将焦点放在element0上.

当在element0上按下shift选项卡时,您需要阻止浏览器的默认行为(event.preventDefault())并手动将焦点放在element2上.

通过这种方式,您可以创建一个循环,使焦点永远不会出现.