Problème avec HTML tabindex

Question

Voici un exemple de code sur lequel je travaille. Lorsque vous naviguez via le bouton ENTRER, le bouton Soumettre invoque l'action "Annuler", bien que l'index des onglets se trouve après le bouton "Suivant".

E.g.

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

Changer l'ordre des boutons « Soumettre » en HTML majoration contribuerait à empêcher l'invocation du bouton « Annuler » par défaut. Mais je dois garder le bouton "Annuler" dans le côté gauche & "Suivant" sur le côté droit.

---

<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

La touche Entrée active le premier élément type="submit" suivant le formulaire, quel que soit l'onglet. Il y a deux moyens de contourner cela:

1. Utilisez JS cliquer sur le bouton particulier lorsque la touche Entrée est pressée:

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

   Cependant, cela se gâter lorsque vous avez un <textarea> sous la forme de que vous voulez bien sûr garder son comportement par défaut avec enter key.

2. boutons Mettre en même élément conteneur avec le bouton suivant d'abord et utiliser les CSS pour les échanger.

   .next { float: right; } 
   .cancel { float: left; } 
   

Answer 2

Je pense qu'il est parce qu'il est le voir Annuler et bouton Suivant comme la même chose. Ils sont tous deux de type Soumettre. Donc, lorsque vous appuyez sur Entrée, il trouve le premier bouton de soumission. Je voudrais changer le type d'annulation pour peut-être réinitialiser? Utilisez ensuite javascript/jQuery pour effectuer une redirection lorsque vous cliquez sur le bouton Annuler.

Il peut y avoir un meilleur moyen.