Question

以下是我正在使用的示例代码。当通过ENTER按钮表单导航时，提交会调用“取消”操作，但它的选项卡索引位于“下一步”按钮之后。

E.g。

Field01 <ENTER>  Field02 <ENTER>  Field03 <ENTER>   >>>>>  Form submits with Cancel action  
Field01 <TAB>    Field02 <TAB>    Field03 <TAB>     >>>>>  Next button is focused

更改HTML标记中“提交”按钮的顺序将有助于防止默认情况下调用“取消”按钮。但我需要在左侧保留“取消”按钮＆amp;右侧的“下一步”按钮。

    <form  method="post" action="/SVRWeb/ActionController" name="frmMain">
        <div>
            <h1>Some information</h1>
            <label>Field 01</label>
            <input type="text" tabindex="0" name="field01" value""  size="15" />
            <label>Field 02</label>
            <input type="text" tabindex="1" name="field02" value""  size="15" />
            <label>Field 03</label>
            <input type="text" tabindex="2" name="field03" value""  size="15" />
        </div>
        <input type="submit" tabindex="4" name="Action.User.Init" value="Cancel" />
        <input type="submit" tabindex="3" name="Action.User.Form2" value="Next"/>
    </form>

Answer 1

无论tabindex如何，回车键都会触发表单中的第一个下一个type="submit"元素。有两种方法可以解决这个问题：

按下回车键时，使用JS单击特定按钮：
```
<form onkeypress="if (event.keyCode == 13) document.getElementById('next').click();">
```
当你在表单中<textarea>时，你当然希望用enter键保持默认行为，这会很糟糕。
首先使用 Next 按钮将按钮放在同一容器元素中，然后使用CSS交换它们。
```
.next { float: right; }
.cancel { float: left; }
```

Answer 2

我认为这是因为它看起来是取消和下一步按钮同样的事情。它们都是提交类型。因此，当您按Enter键时，它会找到第一个提交按钮。我会将取消类型更改为可能重置？然后在单击取消按钮时使用javascript / jQuery进行重定向。

可能有更好的方法。

HTML tabindex问题

2 个答案: