html - 如何将制表符顺序限制为仅表单/div 中的控件？

Question

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

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

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

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 键在对话框中循环。