HTML问题tabindex

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

E.g.

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

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

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

来源

2010-12-06 SLM

作为一个侧面说明，你的第一个选项卡索引应为1，而不是0 – Emmett 2010-12-06 04:16:35

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

<form onkeypress="if (event.keyCode == 13) document.getElementById('next').click();">

然而，这让讨厌的，当你在表单中已经一个<textarea>：

输入键被按下时

使用JS点击特定按钮你当然想用enter键保持它的默认行为。
将按钮放在与相同的容器元素中，然后按下按钮，并使用CSS交换它们。
```
.next { float: right; } 
.cancel { float: left; } 
```

来源

2010-12-06 04:14:43 BalusC

确实在所有主要浏览器的键码事件的工作？我隐约记得在Firefox中遇到了麻烦。 – 2010-12-06 04:17:16

我想这是因为它看到的The取消和Next按钮，同样的事情。他们都是提交类型。所以当你按下回车键时，它会找到第一个提交按钮。我会改变取消类型，可能会重置？然后使用javascript/jQuery在单击取消按钮时执行重定向。

可能有更好的方法。

来源

2010-12-06 04:14:40

HTML问题tabindex

回答

相关问题