Question

我已经为表单中的输入字段定义了选项卡索引。当通过输入字段进行选项卡时，提交按钮永远不会获得焦点，页面上不同形式的一些其他输入字段将获得焦点。这些都有高于3的标签索引。为什么？

<form action="subscription.php" name="subscribe" method="post"  onsubmit="return isValidEmailAndEqual()">
<p id="formlabel">E-mail</p> <input type="text" name="email1" tabindex=1>

<br/>
<p id="formlabel">Repeat e-mail</p> <input type="text" name="email2" tabindex=2> <br/>
<input id="inputsubmit" type="submit" value="Subscribe" tabindex=3>
</form>

CSS：

input {
    background-color : #333;
    border: 1px solid #EEE;
    color: #EEE;
    margin-bottom: 6px;
    margin-top: 4px;
    padding: 1px;
    width : 200px;
}

#inputsubmit {
    background-color : #d7e6f1;
    border: 1px solid #EEE;
    color: #0000ff;
    margin-bottom: 6px;
    margin-top: 4px;
    padding: 1px;
    width : 200px;
}

#inputsubmit:hover {
    cursor: pointer; cursor: hand;  
    background-color : #d7e6f1;
    border: 1px solid #0000ff;
    color: #0000ff;
    margin-bottom: 6px;
    margin-top: 4px;
    padding: 1px;
    width : 200px;
}

p#formlabel{
    width: 100;
}

Answer 1

这是一个Mac'功能'，默认情况下只允许您选择输入框和列表。选中所有控件是一个高级选项：

http://support.mozilla.com/en-US/kb/Pressing+Tab+key+does+not+select+menus+or+buttons

Mac上的Firefox会复制此默认操作系统行为。

Answer 2

这是Mac OS X问题。您的Mac可能配置为不允许您切换到非文本字段元素（例如，按钮）。您可以通过进入键盘的系统首选项来更改此设置。然后单击shorcut选项卡并查看底部并选择允许聚焦所有控件的选项。除了Mac OS中的所有按钮外，您现在应该能够专注于Safari和Firefox上的按钮。

要快速更改Mac上的设置，请按CTRL + F7（或者如果您使用的是Mac键盘，请按住功能键并按CTRL + F7键。）

Answer 3

好的，让我们看看。我在Firefox（Mac，Windows），Safari（Mac）和IE（Windows）中尝试了上述代码。以下是我的发现：

使用时

<button name="thename" type="submit">Subscribe</button>

或

<input id=\"inputsubmit\" type=\"submit\" value=\"Subscribe\">

提交表格（相同结果）：

FF（Win） - 当标签时，焦点确实按下按钮
FF（Mac） - 标签时，焦点没有按下按钮。
Safari（Mac） - 标签时，焦点不是按下按钮。
IE（Win） - 当标签显示时，按钮似乎始终处于某种焦点状态，当按Tab键切换到i时，按钮会有一些额外的焦点。
总而言之，当表单中的项目具有焦点时，可以只需按Enter键以“单击”提交按钮。

我猜结论必须是这样的：

不同的浏览器行为不同。即使是相同的浏览器在不同的OS（FF）上的行为也不同。
表单的默认行为是按Enter键将使用表单中的第一个提交按钮提交表单。
我认为焦点在标签时不会碰到按钮是很可怜的，因为我认为很多用户都希望在点击输入之前关注该项目。

或者你说什么......？

Answer 4

您不必定义选项卡索引，也可以放弃它们 - 除非您希望在它们按创建进行排序时修改它们的自然顺序。尝试完全取出它们，看看它是否更符合您的喜好。

即使正确设置了tabindex，提交按钮也不会聚焦

4 个答案: