ansaurus

Question

How to prevent a box with overflow-y: scroll from stealing the focus on tab on Firefox?

Answer 1

+2 A:

Use the tabIndex attribute to control the order of items that Tab jumps through. Like this:

<body>
    <form action="/">
        <input type="text" value="First" tabIndex="1">
        <div class="steal-focus">Content</div>
        <input type="text" value="Second" tabIndex="2">
    </form>
</body>

Matt Ball 2010-09-08 18:48:47

Specifically, this means adding `tabindex="-1"` on the `<div>`. This works, thank you. Ideally, I'd like a solution in CSS, to counter-balance the `overflow-y: scroll`, so I don't have to change the generate markup.

Alessandro Vernet 2010-09-08 18:55:35

animuson 2010-09-08 18:59:55

@animuson: from the W3C document I linked: "This value must be a number between 0 and 32767" - why does it need to start at 1?

Matt Ball 2010-09-08 19:08:31

@Alessandro - personally, I would avoid using a `tabIndex` that's outside the range. But if it works, it works...

Matt Ball 2010-09-08 19:10:35

@Bears will eat you: If you read the rest of the documentation, setting it to 0 results in it being used in the order it appears in the document, so it will go to First (0), then Content (also 0), then Second (1). If it's 1 and 2, it will go First (1), Second (2), then Content (0). Everything defaults to 0, the order in which they appear. I tested both examples and 0, 0, 1 acts just like 0, 0, 0, but 1, 0, 2 will skip the division in the middle.

animuson 2010-09-08 19:12:03

@Bears @animuson 0 is a special value in HTML5, so I would start with 1. See: http://www.w3.org/TR/html5/editing.html#attr-tabindex

Alessandro Vernet 2010-09-08 19:13:03

@Bears will eat you: -1 isn't outside range, but a way to tell the browser that this control shouldn't be able to get the focus. See: http://www.w3.org/TR/html5/editing.html#attr-tabindex

Alessandro Vernet 2010-09-08 19:14:33

As a side-note, I was hoping to be able to use `-moz-user-focus: ignore` in CSS, instead of adding `tabindex="-1"` to the markup, but failed to make this work: http://stackoverflow.com/questions/3671169/how-to-get-moz-user-focus-ignore-to-work

Alessandro Vernet 2010-09-08 19:20:16

Yup, you guys are definitely right about the 0 and -1 values. Is it just me, or are those statements in W3C HTML4 docs contradictory?... at any rate, I tweaked my answer.

Matt Ball 2010-09-08 19:26:03

-moz-user-focus: ignore doesn't seem to actually work right in Firefox (bug: https://bugzilla.mozilla.org/show_bug.cgi?id=379939). So using the taxindex attribute is indeed the way to go.

Alessandro Vernet 2010-09-08 23:15:57

ansaurus

tags:

views:

answers:

How to prevent a box with overflow-y: scroll from stealing the focus on tab on Firefox?

related questions