Question

我目前正在建设的网站与常规网站略有不同。所有网站内容都不在一个单独的index.php文件中，而是使用绝对定位和javascript，用户可以在页面之间“平移”整个网站。

页面中也有几种不同的形式。我被告知不要担心禁用Javascript的人，所以我们选择了jQuery与页面上所有表单的JSON Web服务相结合。这一切现在都很完美，但是有一个轻微的可用性问题：tab-indices。

由于存在多个表单，从一个输入字段到下一个输入字段的标签可能导致当用户到达表单的末尾然后再次标记时，用户突然跳转到站点的完全不同的部分。这在Firefox和Safari中尤其令人讨厌，其中在选项卡时忽略按钮和单选按钮。

所以这是我的问题：有没有人知道将用户的焦点约束到单个表单元素的方法？

Answer 1

我目前正在建设的网站与常规有点不同。所有网站内容都不在一个单独的index.php文件中，而是使用绝对定位和javascript，用户可以在页面之间跨越网站“平移”，而不是拥有多个单独的页面。

这是另一种可能会解决此问题的方法，最终可能会更容易获取。

我假设您在该页面上有一些元素用于触发从一个子页面到另一个子页面的平移？

如果是这样，这里的基本想法是，当任何页面“滚动”时，隐藏“子页面”（可能是某个容器DIV），显示：none或visibility：hidden。

这里的关键问题是，使用这两种方法中的任何一种隐藏的内容都是不可标记的，因此用户不会意外地标记到这些隐藏页面中。同样重要的是，从可访问性的角度来看，屏幕阅读器知道忽略以这种方式标记的内容，因此他们只会阅读当前页面（这与用户看到的内容一致），而不是整个页面。

Answer 2

为什么不按每个表单增加100个tabindex？

因此，表单1将具有从100-112运行的tabindeces，表单2将具有200-234的tabindex，表单3将具有从300-314运行的tabindex ...

Answer 3

好的，我决定编写自己的解决方案，适用于所有主流浏览器（Safari除外，但稍后会详细介绍）。基本上，它的工作方式是将类分配给表单中最后一个“tab-able”元素，通常是提交按钮，称为“lastInForm”。简单的HTML看起来像这样：

<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>

使用最新版本的jQuery，我会听到.lastInForm元素的keydown事件，并检查keyCode 9，它对应于tab键。当我收到该事件时，我查找最近的表单元素，查找所述表单中的第一个输入元素，并将焦点应用于它。

像这样：

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

...整齐地以一种形式，你可以使用tab键遍历元素。

现在我提到它可以在除Safari之外的所有主要浏览器上运行。原因是Safari默认情况下不允许您选择除textfields之外的任何元素。要启用此行为，您必须检查：

Preferences > Advanced > Universal Access: Press Tab to highlight each item on a webpage.

为什么Apple默认选择禁用这种有用的辅助功能超出我的范围，但我所知道的是，如果用户启用此设置，我的脚本也适用于他们。

Answer 4

在（X）HTML中使用tabindex

这在Seamonkey 2.0.11和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>

一个HTML页面上的多个表单：如何将Tab键限制为单个表单？

4 个答案: