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

发布于 2024-08-22 12:32:51 字数 1186 浏览 7 评论 0原文

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

原文

I have defined tab index for the input fields in a form. When tabbing through the input fields the submit button is never getting the focus, some other input fields in a different form on the page gets the focus. Those are all having tab indexes higher than 3. How come?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

缱倦旧时光 2024-08-29 12:32:51

这是 Mac 的一项“功能”，默认情况下仅允许您选择思维输入框和列表。使用 Tab 键浏览所有控件是一个高级选项：

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

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

回复收藏 0 原文

断桥再见 2024-08-29 12:32:51

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

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

回复收藏 0 原文

抱着落日 2024-08-29 12:32:51

好吧，让我们看看。我已经在 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) - 使用 Tab 键时，焦点不是点击按钮。
IE (Win) - 当 Tab 键切换时，按钮似乎始终处于某种焦点，并且当 Tab 键切换到 i 时，按钮将具有一些额外的焦点。
总而言之，当表单内的某个项目获得焦点时，只需按 Enter 键即可“单击”提交按钮。

我想结论应该是这样的：

不同的浏览器表现不同。即使相同的浏览器在不同的操作系统 (FF) 上也会有不同的行为。
表单的默认行为是按 Enter 键将使用表单中的第一个提交按钮提交表单。
我认为在 Tab 键切换时焦点不会击中按钮是很遗憾的，因为我认为相当多的用户希望在按 Enter 之前将焦点放在该项目上。

或者你说什么...？

Ok, let's see. I have tried above code in Firefox (Mac, Windows), Safari (Mac) and IE (Windows). Here are my findings:

When using

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

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

for submitting the form (same result):

FF (Win) - When tabbing, the focus does hit the button
FF (Mac) - When tabbing, the focus is not hitting the button.
Safari (Mac) - When tabbing, the focus is not hitting the button.
IE (Win) - When tabbing, the button seems to be in some kind of focus all the time and the button will have some extra focus when tabbing to i.
For all, when an item inside the form has the focus it's possible to just hit enter in order to "click" the submit button.

I guess the conclusion has to be like this:

Different browsers behave differently. Even the same browser behaves differently on different OS (FF).
The default behaviour of a form is that hitting enter will submit the form using the first submit button in the form.
I think it's a pitty that the focus wont hit the button when tabbing because I think that quite a lot of users expect the focus on the item before hitting enter.

Or what do you say...?

回复收藏 0 原文