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

回答

相關問題