Multiple forms on one HTML page: how to restrict tabbing to a single form?

前端未结

关注

 4  739

The site I\'m currently building is a little different from the norm. Instead of having multiple separate pages, all site content is on a single index.php file, and using ab

相关标签:

4条回答

感情败类

2021-01-08 01:03

Why not increment your tabindex by, say, 100, per form?

So form 1 will have tabindeces running from 100-112, form 2 will have tabindex from 200-234, form 3 will have tabindex running from 300-314...

0 讨论(0)
发布评论:

提交评论
- 加载中...
太阳男子

2021-01-08 01:04

The site I'm currently building is a little different from the norm. Instead of having multiple separate pages, all site content is on a single index.php file, and using absolute positioning and javascript the user "pans" across the site from page to page.

Here's an alternate approach that might side-step this issue, and could end up being more accessible.

I'm assuming you have some elements on that page that you use to trigger the panning from one sub-page to the other?

If so, basic idea here is that when any page is "scrolled off", hide that 'sub-page' (presumably some container DIV) with display:none or visibility:hidden.

The key issue here is that content hidden with either of these two methods is non-tabbable, so the user can't accidentally tab into those hidden pages. Also importantly from an accessibility point of view, screenreaders know to ignore content that's marked up this way, so they will only read the current page (which is consistent with what a sighted user sees), not the entire page.

0 讨论(0)
发布评论:

提交评论
- 加载中...

生来不讨喜

2021-01-08 01:06

Use tabindex in your (X)HTML

This works flawlessly in Seamonkey 2.0.11 and Chrome 10.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>untitled</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
        /* absolute positioning */
        #form1 { position: absolute; bottom: 0; right: 0; width: 40%; }
        #form2 { position: absolute; top: 100px; left: 30px; width: 40%; }
       /* floats
        #form1 {float: right; width: 40%; }
        #form2 {float: left; width: 40%; } */
    </style>
</head>

<body>

<form id="form1" action="#" method="get">
<fieldset>
<legend>Form 1</legend>
<div><label for="t1">T1</label><input type="text" id="t1" name="t1" tabindex="1" /></div>
<div><label for="t3">T3</label><input type="text" id="t3" name="t3" tabindex="3" /></div>
<div><label for="t2">T2</label><input type="text" id="t2" name="t2" tabindex="2" /></div>
<input type="submit" tabindex="4" />
</fieldset>
</form>

<form id="form2" action="#" method="get">
<fieldset>
<legend>Form 2</legend>
<div><label for="t6">T6</label><input type="text" id="t6" name="t6" tabindex="6" /></div>
<div><label for="t5">T5</label><input type="text" id="t5" name="t5" tabindex="5" /></div>
<input type="submit" tabindex="7" />
</fieldset>
</form>

</body>

</html>

0 讨论(0)

后悔当初

2021-01-08 01:08
Okay, I've decided to write my own solution that works in all major browsers (except Safari, but more on that later). Basically, how it'd work is that you assign a class to the last "tab-able" element in your form, which is usually the submit button, called 'lastInForm'. Simple HTML would look like this:
```
<form action="action.php">
<fieldset><input id="input1" name="input1" type="text" placeholder="text here" /></fieldset>
<fieldset><input id="input2" name="input2" type="text" placeholder="text here" /></fieldset>
<fieldset><input id="input3" name="input3" type="text" placeholder="text here" /></fieldset>

<button class="lastInForm" type="submit">I'm last</button>
</form>
```
Using the latest version of jQuery, I listen to the keydown event for that .lastInForm element and check for the keyCode 9, which corresponds to the tab-key. When I receive that event, I look up the closest form element, look up the first input element in said form, and apply focus to it.

Like so:
```
$(document).ready(function(evt){

$('.lastInForm').live('keydown', function(evt){
    if(evt.keyCode === 9){
        evt.preventDefault();

        var form = $(this).closest('form');
        var input = $('input:first', form);

        if(input !== undefined){
            input.focus();
        }
    }
});
});
```
... which results neatly in a form where you can loop through the elements using the tab key.

Now I mentioned earlier that it works on all major browser except Safari. The reason for this is that Safari by default doesn't allow you to tab to any element except textfields. To enable this behavior you have to go and check:
```
Preferences > Advanced > Universal Access: Press Tab to highlight each item on a webpage.
```
Why Apple has chosen to disable such a helpful accessibility feature by default is beyond me, but all I know is if a user enables this setting my script will work for them too.
0 讨论(0)
发布评论:

提交评论
- 加载中...