CODEWITHSUNDEEP
html
1800 INFORMATION
1800 INFORMATION

Reputation: 135443

How can I limit tab order to only the controls within a form/div?

I want to replicate the effect that this dialog shows:

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

On this page, if you click on "Create new user", it pops a form with some controls. The effect I want to replicate is that when you tab around in this dialog, the tab order cycles only within the controls on that tab, and never to the controls and other selectable elements outside the dialog. I can't quite see how they are doing it. Can someone please explain?

Upvotes: 3

Views: 1367

Answers (1)

1800 INFORMATION
1800 INFORMATION

Reputation: 135443

I found that this behaviour is controlled by javascript. jqueryui binds to the keydown event in dialogs:

    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();
            }
        },

Basically, this allows looping around in the dialog by the tab key.

Upvotes: 1

Related Questions