代码之家  ›  专栏  ›  技术社区  ›  Nicsoft

即使tabindex设置正确,提交按钮也未聚焦

  •  10
  • Nicsoft  · 技术社区  · 16 年前

    我已经为表单中的输入字段定义了选项卡索引。当在输入字段之间切换时,“提交”按钮永远不会获得焦点,页面上其他一些不同形式的输入字段会获得焦点。这些都有高于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;
    }
    
    4 回复  |  直到 10 年前
        1
  •  15
  •   TylerH Ash Burlaczenko    10 年前

    默认情况下,这是Mac的一项“功能”,只允许您对输入框和列表进行制表。通过所有控件进行选项卡切换是一个高级选项:

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

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

        2
  •  13
  •   Sterling Bourne    14 年前

    这是一个MacOSX问题。您的Mac可能被配置为不允许您对非文本字段元素(例如按钮)进行制表。您可以通过进入键盘的系统首选项来更改此设置。然后单击shorcut选项卡并查看底部,选择允许聚焦所有控件的选项。除了Mac OS中的所有按钮外,您现在应该能够关注Safari和Firefox上的按钮。

    要快速更改Mac上的设置,请按CTRL+F7(或者如果使用Mac键盘,请尝试按住功能键并按CTRL+F7)。

        3
  •  4
  •   Nicsoft    16 年前

    好的,让我看看。我曾在Firefox(Mac、Windows)、Safari(Mac)和IE(Windows)中尝试过上述代码。以下是我的发现:

    使用时

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

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

    提交表格时(结果相同):

    • FF(Win)-在切换时,焦点确实会按按钮
    • Safari(Mac)-当使用Tab键时,焦点不在按下按钮。
    • IE(Win)-当切换时,按钮似乎一直处于某种焦点,当切换到i时,按钮将有一些额外的焦点。
    • 总之,当表单中的某个项目具有焦点时,只需按enter键即可“单击”提交按钮。

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

    2. 表单的默认行为是,按enter键将使用表单中的第一个提交按钮提交表单。

    3. 我认为在点击标签时焦点不会点击按钮是一件很小的事情,因为我认为相当多的用户希望在点击回车键之前焦点会在项目上。

        4
  •  0
  •   casraf    16 年前

    您不必定义制表符索引,也可以放弃它们——除非您想在它们按创建排序时修改它们的自然顺序。试着把它们一起拿出来,看看它是否更符合你的喜好。