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

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

---

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

我发现这种行为是由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键在对话框中循环。

这似乎是一个

（编辑：啊，不，比这更复杂。不知道他们是如何做到的。）他们使用javascript和keydown事件绑定来管理tab，见我的答案