如何從水平設置HTML的制表符順序？

Question

我有一個多重表單，包含2個輸入框和一個提交按鈕。 我給每個輸入的制表順序。 我有每種輸入類型的標簽索引。 制表符順序垂直移動而不是水平移動。 它應該轉到第一個輸入框，第二個輸入框，然后提交按鈕。

下面是代碼。

<form class="monitorForm" >
  <div class="monitorAdd">
    textbox1  <input type="text" tabindex="1">
    textbox2  <input type="text" tabindex="2">
        <input type="button" tabindex="3" value="submit">
  </div>
</form>
<form class="monitorForm">
    <div class="monitorAdd">
        textbox1        <input type="text" tabindex="1">
        textbox2        <input type="text" tabindex="2">
        <input type="button" tabindex="3" value="submit">
    </div>
</form>
<form  class="monitorForm">
    <div class="monitorAdd">
          textbox1        <input type="text" tabindex="1">
          textbox2        <input type="text" tabindex="2">
         <input type="button" tabindex="3" value="submit">
    </div>
</form>

下面是js代碼

$('form').each(function(){

    var list  = $(this).find('*[tabindex]').sort(function(a,b){ return a.tabIndex <      b.tabIndex ? -1 : 1; }),
    first = list.first();
    list.last().on('keydown', function(e){
        if( e.keyCode === 9 ) {
            first.focus();
            return false;
         }
    });
});

它是一個動態形式，它循環出現並包含許多字段。 我只想為3個輸入字段指定制表符順序。

http://jsfiddle.net/mWLtp/5/

請幫助我解決這個問題。 預先感謝。

Answer 1

jQuery Way 演示

var index = 1;

$("form input").each(function () {
    $(this).attr("tabindex", index);
    index++;
});

HTML WAY您可以直接給Tabindex 演示

<form class="monitorForm" >
    <div class="monitorAdd">
        textbox1        <input type="text" tabindex="1">
        textbox2        <input type="text" tabindex="2">
        <input type="button" tabindex="3" value="submit">
     </div>
</form>
<form class="monitorForm">
    <div class="monitorAdd">
        textbox1        <input type="text" tabindex="4">
        textbox2        <input type="text" tabindex="5">
        <input type="button" tabindex="6" value="submit">
    </div>
</form>
<form  class="monitorForm">
    <div class="monitorAdd">
          textbox1        <input type="text" tabindex="7">
          textbox2        <input type="text" tabindex="8">
         <input type="button" tabindex="9" value="submit">
    </div>
</form>

好吧，如果您不定義默認為水平的tabindex屬性，則不需要任何tabindex或jquery

Answer 2

set distinct tab index. for your case set it in 1 t0 9.


Like

<form class="monitorForm" >
 <div class="monitorAdd">
    textbox1        <input type="text" tabindex="1">
    textbox2        <input type="text" tabindex="2">
    <input type="button" tabindex="3" value="submit">
 </div>
</form>
<form class="monitorForm">
<div class="monitorAdd">
    textbox1        <input type="text" tabindex="4">
    textbox2        <input type="text" tabindex="5">
    <input type="button" tabindex="6" value="submit">
</div> 
</form>
<form  class="monitorForm">
<div class="monitorAdd">
      textbox1        <input type="text" tabindex="7">
      textbox2        <input type="text" tabindex="8">
     <input type="button" tabindex="9" value="submit">
 </div>
 </form>

Answer 3

賦予每個tabindex值，而不是override您的tabindex值。

JSFIDDLE演示

Answer 4

所有tabindex=1都會按照從上到下的順序進行，無論您將它們放在單個<div>還是其他位置。 然后輪到tabindex=2 。

您的解決方案：

更改tabindex像1,2,3,4,5,6 ..而不是1,2,3,1,2,3，...

希望這可以幫助。 :)