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

Posted 2023-03-05

【中文标题】即使正确设置了 tabindex，提交按钮也没有聚焦

【英文标题】：Submit button not focused even though tabindex is properly set

【发布时间】：2011-01-21 00:46:06

【问题描述】：

我已经为表单中的输入字段定义了选项卡索引。当在输入字段中切换时，提交按钮永远不会获得焦点，页面上不同表单中的其他一些输入字段会获得焦点。那些标签索引都高于 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;

【问题讨论】：

我已经尝试过您的代码，并且它应该像“标签”一样。也许您页面中的其他内容干扰了正确的标签顺序？

感谢您的回答！好吧，它肯定不起作用（使用 Firefox）。它可能与我的样式表有关吗？我用我的样式表更新了我的问题。比如我在做悬停的事情，会不会有什么影响？

【参考方案1】：

这是 Mac 的一项“功能”，默认情况下只允许您使用选项卡思考输入框和列表。在所有控件之间切换是一个高级选项：

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

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

【讨论】：

也发生在 Safari 上。我认为这是 Mac 的事情——然后是浏览器是否服从操作系统的偏好。转到 Mavericks 中的键盘设置，然后在“全键盘访问”下启用“所有控件”对我有用。

【参考方案2】：

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

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

【参考方案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) - 切换时，按钮似乎一直处于某种焦点，并且在切换到 i 时按钮会有一些额外的焦点。 总而言之，当表单内的某个项目获得焦点时，只需按 Enter 键即可“单击”提交按钮。

我猜结论应该是这样的：

不同的浏览器表现不同。即使是相同的浏览器在不同的操作系统 (FF) 上的行为也会有所不同。

表单的默认行为是按回车键将使用表单中的第一个提交按钮提交表单。

我认为在 Tab 键时焦点不会点击按钮是一个遗憾，因为我认为相当多的用户希望在按 Enter 之前将焦点放在项目上。

或者你说什么...？

【讨论】：

1.我认为不同的是操作系统行为，而不是浏览器。请注意，在所有 Windows 版本的浏览器中，您都会获得焦点，而在 Mac 上则不会。 2. 它没有获得焦点——但是表单的默认行为是点击回车并使用表单上的第一个提交按钮提交它。 3. 不了解其他用户，但我希望在完成表单后点击进入，无论关注什么。

2.我更新了我的答案以反映您的评论。 3. 我通常按 Tab 键然后回车，但我妈妈告诉我我很独特，所以...

哈哈。好吧，也许你是；）这是一个小问题，而且由于我没有 Mac，我无法真正看到它实时发生——所以我认为我现在可以假设帮助你。

呵呵...感谢您的帮助，讨论帮助我了解了哪些是可能的，哪些是不可能的。

【参考方案4】：

您不必定义选项卡索引，您不妨放弃它们——除非您想在它们按创建排序时修改它们的自然顺序。尝试将它们全部取出，看看它是否更符合您的喜好。

【讨论】：

其实我之前没有定义任何tabindexes。但由于无法使用标签提交按钮，我认为我必须添加标签索引。但它仍然没有帮助。我用我的样式表数据更新了我的问题，至少是其中的一部分......不知道这是否重要？

它在 Firefox 和 Chrome 中对我来说都是重点——你认为也许你只是看不到它吗？尝试为#inputsubmit:focus 添加第三种样式，看看是否有效。

我实际上可以看到另一个不同形式的输入字段正在获得焦点。光标在该输入字段中闪烁。我尝试添加 #inputsubmit:focus 样式，但在切换时不会触发它。我也在 safari 上试过，但没有运气。坐在 Mac 上，但我认为它不应该有任何区别......

你确定他们的自然顺序应该有重点吗？此外，在循环字段之前尝试多次使用制表符 - 它曾经获得焦点吗？

不，它永远不会获得焦点，至少在 Mac 上不是 FF。检查我自己的答案。真的可以对 Mac 和 Win 上的所有浏览器执行此操作吗？