Restrict tabindex focusing to a section of the page

Question

Situation:

I have a webpage which opens modal windows (light boxes) which contain forms where the user can input data. Users generally navigate using the keyboard, tabbing from one field to the next.

Problem:

When a modal window opens, only the window is active, the rest of the page is not accessible using the mouse, but elements can be reached by tabbing out of the modal window.

Question:

How can I restrict movement by using the tab button to only the elements within the form window?

The only thing I can think of is using Javascript to set tabindex=-1 on all form elements (and other focusable elements) when the modal window is opened and then set the tabindex values back to their previous values when the modal window is closed. Is there a simpler/better way?

Though 3 years have passed , Did you solve your issue? If yes can you share it here. — zeppelin, Dec 01 '14 at 08:18
I couldn't find a better solution that the one I mentioned in the question: simply iterating over all elements outside of the modal window and setting their tabindex to -1. The difficulty is that you need to keep track of the elements you set and their original tabindex value so that you can revert the original values once you close the modal window. It worked well, implemented using jQuery.The only problem was in IE on pages with many 100s of elements which have the tabindex attribute, although newer versions of IE probably fair better. The solution was simply to not run in IE on these pages. — SlappyTheFish, Dec 01 '14 at 10:09

halfbit · Answer 1 · 2017-07-27T17:34:38.633

How about catching the tab-key? On the last element and then put the focus on the first and vice versa with shift-tab

This I am using in a multi-modless-diaolog environment, to keep the focus with in a Dialog, switching between dialogs with mouse or other key

inputs=".editing, input, textarea, button, a, select"
no_tab="[type='hidden'], :disabled"

$focusable=dlg.$form.find(inputs).not(no_tab)


$fa_first=$focusable.first()
$fa_last=$focusable.last()

$fa_last.on("keydown", (evt) =>
    if evt.keyCode==9 && ! evt.shiftKey
        $fa_first.focus()
        evt.preventDefault()
        false
)
$fa_first.on("keydown", (evt) =>
    if evt.keyCode==9 && evt.shiftKey
        $fa_last.focus()
        evt.preventDefault()
        false
)

small edit: replaced my on "unibind()" (=.off(x).on(x)) function through jQuery "on()"

@JoelAlvarezMyrrie: Good question! I can't remember, prob. it was a browser incompatibility or just a cut and past silliness ... (oh I see select is missing!) — halfbit, Jul 27 '17 at 17:34

score 3 · Answer 2 · answered Jul 06 '18 at 12:10

3

in case you want to restrict the focus inside dom "parent"

parent.addEventListener('focusout', function(event) {
    event.stopPropagation();

    if (node.contains(event.relatedTarget)) {  // if focus moved to another 
                                                              parent descend
        return;
    }

    parent.focus();  // otherwise focus on parent or change to another dom
})

supported by all mordern browsers

answered Jul 06 '18 at 12:10

CevenNome

59
2

"ReferenceError: node is not defined" – Stephen R Jul 16 '19 at 13:35
`node` should be `parent` since you are checking inside of the parent element – adr5240 Jan 11 '22 at 22:15

score 1 · Answer 3 · answered Feb 12 '12 at 14:52

Have a look at the jQuery BlockUI Plugin. They have an example using a modal box with two buttons, and it restricts tabbing as well.

It may or may not work out-of-the-box with your modal windows, but it's worth a look instead of having to implement your own work-around.

score 0 · Answer 4 · answered Aug 17 '23 at 04:07

0

When do this in React . I can pass tabIndex like you said in question . And I also have to try with pointerEvents none css , for my invisible section in my case.

answered Aug 17 '23 at 04:07

ThanHtutZaw

67
1
7

score -1 · Answer 5 · answered Jan 09 '13 at 19:25

Even though it is an old post I was looking for a solution to this problem and did the following to solve it.

Using JQuery I disabled all input fields in different forms and divs as soon as the modal window opens up (except the ones on the modal form itself).

$('#formId :input').prop('disabled',true);

when the modal form is closed, you can enable the input elements again.

Disabled fields are not considered when "tabbing" around your page.

Links are considered for tabbing too. – Doug Amos Jan 13 '15 at 09:16 — Doug Amos, Jan 13 '15 at 09:16

Restrict tabindex focusing to a section of the page

5 Answers5

Linked

Related