如何将Tab键顺序仅限制为表单/ div中的控件？

Question

我想复制此对话框显示的效果：

http://jqueryui.com/dialog/#modal-form

在此页面上，如果您点击“创建新用户”，它会弹出一个包含一些控件的表单。我要复制的效果是，当您在此对话框中选中时，Tab键顺序仅在该选项卡上的控件内循环，而不会循环到对话框外的控件和其他可选元素。我不太明白他们是怎么做的。有人可以解释一下吗？

Answer 1

我发现这种行为是由javascript控制的。 jqueryui绑定到对话框中的keydown事件：

    this._on( this.uiDialog, {
        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();
            }
        },

基本上，这允许通过tab键在对话框中循环。