即使tabindex设置正确，提交按钮也不会被聚焦 [英] Submit button not focused even though tabindex is properly set

问题描述

我为表单中的输入字段定义了标签索引。当通过输入字段切换时，提交按钮永远不会获得焦点，页面上不同形式的其他一些输入字段将获得焦点。

 < form action =subscription.phpname = subscribemethod =postonsubmit =return isValidEmailAndEqual（）> 
< p id =formlabel>电子邮件< / p> < input type =textname =email1tabindex = 1> 
 
< br /> 
< p id =formlabel>重复电子邮件< / p> < input type =textname =email2tabindex = 2> <峰; br /> 
< input id =inputsubmittype =submitvalue =Subscribetabindex = 3> 
< / form> 
  

CSS：

  input {
 background-color：＃333; 
 border：1px solid #EEE; 
颜色：#EEE; 
 margin-bottom：6px; 
 margin-top：4px; 
 padding：1px; 
 width：200px; 
} 
 
 #inputsubmit {
 background-color：＃d7e6f1; 
 border：1px solid #EEE; 
颜色：＃0000ff; 
 margin-bottom：6px; 
 margin-top：4px; 
 padding：1px; 
 width：200px; 
} 
 
 #inputsubmit：hover {
 cursor：pointer;光标：手; 
背景颜色：＃d7e6f1; 
 border：1px solid＃0000ff; 
颜色：＃0000ff; 
 margin-bottom：6px; 
 margin-top：4px; 
 padding：1px; 
 width：200px; 
} 
 
 p＃formlabel {
 width：100; 
} 
  

解决方案

只允许你在默认情况下标签思考输入框和列表。通过所有控件选项卡是高级选项：

http://support.mozilla.com/zh-CN/kb/Pressing+Tab+key+does+not+select+menus+或+按钮

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

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

解决方案

It's a Mac 'feature' to only let you tab thought input boxes and lists by default. Tabbing through all controls is an advanced option:

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

Firefox on Mac copies this default OS behavior.

这篇关于即使tabindex设置正确，提交按钮也不会被聚焦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！