javascript 一个 HTML 页面上的多个表单：如何将选项卡限制为单个表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5484496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple forms on one HTML page: how to restrict tabbing to a single form?
提问by gillesv
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.
我目前正在建设的网站与常规网站略有不同。不是有多个单独的页面，所有站点内容都在一个 index.php 文件中，并且使用绝对定位和 javascript，用户在站点之间从页面“平移”。
There are several different forms in the page as well. I was told not to worry about catering to people with Javascript disabled so we've opted for jQuery combined with JSON web-services for all forms on the page. This all works perfectly now, but there's a slight usability problem: tab-indices.
页面中也有几种不同的形式。有人告诉我不要担心迎合禁用 Javascript 的人，所以我们选择了 jQuery 与 JSON 网络服务相结合的页面上的所有表单。这一切现在都完美无缺，但有一个轻微的可用性问题：制表符索引。
Since there are multiple forms, tabbing from one input-field to the next can result in the user suddenly jumping to an entirely different part of the site when the user reaches the end of a form and then tabs again. This is especially annoying in Firefox and Safari where buttons and radiobuttons are ignored when tabbing.
由于有多个表单，从一个输入字段切换到下一个输入字段可能会导致用户在到达表单末尾并再次切换时突然跳转到站点的完全不同的部分。这在 Firefox 和 Safari 中尤其令人讨厌，因为它们在使用 Tab 键时会忽略按钮和单选按钮。
So here's my question: does anyone know of a way to constrain a user's focus to a single form element?
所以这是我的问题：有没有人知道一种将用户的注意力限制在单个表单元素上的方法？
回答by BrendanMcK
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.
我目前正在建设的网站与常规网站略有不同。不是有多个单独的页面，所有站点内容都在一个 index.php 文件中，并且使用绝对定位和 javascript，用户在站点之间从页面“平移”。
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.
如果是这样，这里的基本思想是，当任何页面“滚动”时，使用 display:none 或visibility:hidden 隐藏该“子页面”（大概是某个容器 DIV）。
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.
这里的关键问题是使用这两种方法中的任何一种隐藏的内容都是不可标签的，因此用户不会意外地标签到那些隐藏的页面。同样重要的是，从可访问性的角度来看，屏幕阅读器知道忽略以这种方式标记的内容，因此他们只会阅读当前页面（与视力正常的用户看到的内容一致），而不是整个页面。
回答by someguy
Why not increment your tabindex by, say, 100, per form?
为什么不将每个表单的 tabindex 增加 100？
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...
因此，表格 1 的 tabindeces 范围为 100-112，表格 2 的 tabindex 范围为 200-234，表格 3 的 tabindex 范围为 300-314...
回答by gillesv
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:
好的，我决定编写自己的解决方案，适用于所有主要浏览器（Safari 除外，稍后会详细介绍）。基本上，它的工作原理是将一个类分配给表单中最后一个“可制表”元素，通常是提交按钮，称为“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>
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.
使用最新版本的 jQuery，我监听那个 .lastInForm 元素的 keydown 事件并检查 keyCode 9，它对应于 tab 键。当我收到该事件时，我会查找最近的表单元素，查找该表单中的第一个输入元素，并将焦点应用于它。
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.
...这会整齐地形成一种形式，您可以在其中使用 Tab 键循环遍历元素。
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:
现在我之前提到它适用于除 Safari 之外的所有主要浏览器。这样做的原因是默认情况下 Safari 不允许您使用 Tab 键切换到除文本字段之外的任何元素。要启用此行为，您必须去检查：
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.
为什么 Apple 选择默认禁用如此有用的辅助功能我无法理解，但我所知道的是，如果用户启用此设置，我的脚本也将适用于他们。
回答by neurino
Use tabindexin your (X)HTML
在 (X)HTML 中使用tabindex
This works flawlessly in Seamonkey 2.0.11 and Chrome 10.0
这在 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>
