HTMLのウェブページのタブ移動に必要なもの

Question

タブ& Tab+shiftのような機能がどこでも機能するように、ウェブページのタブ移動を維持するために必要なことを知りたいだけです。

Divベースのhtmlとテーブルベースのhtmlではどちらも動作しますが、ラベルが含まれる場合、この機能はmozillaでの動作を停止します。私はtabindexを使ってみましたが動作しません。

<h3>Div</h3> 
 
<div><input type="text" name="text1"></div> 
 
<div><input type="text" name="text1"></div> 
 
<div><input type="text" name="text1"></div> 
 
<div><input type="text" name="text1"></div> 
 
<div><input type="text" name="text1"></div> 
 
<div><input type="text" name="text1"></div> 
 
<div><input type="text" name="text1"></div> 
 
<div><input type="text" name="text1"></div> 
 

 
<h3>Table</h3> 
 

 
<table> 
 
    <tr> 
 
    <td><input type="text" name="text1"></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="text" name="text1"></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="text" name="text1"></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="text" name="text1"></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="text" name="text1"></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="text" name="text1"></td> 
 
    </tr> 
 
</table>

Answer 1

私は、これら二つの質問question1とquestion2からの助けを取って、タブの移動に役立つスクリプトを構築しました。

ここに私のコードです。タブ移動を必要としないページ。

<script> var notabmovement = true;</script> 

このスクリプトの前。

if (typeof notabmovement === 'undefined' || !notabmovement) { 
      //Tab Movement //TAB & TAB+SHIFT 
      $("body").on('change', function() { 
       $(":input:not([type=hidden]):visible").each(function (i) { 
        $(this).attr('tabindex', i + 1); 
       }); 
      }); 
      $("body").on('click', function() { 
       $(":input:not([type=hidden]):visible").each(function (i) { 
        $(this).attr('tabindex', i + 1); 
       }); 
      }); 
      $(":input:not([type=hidden]):visible").each(function (i) { 
       $(this).attr('tabindex', i + 1); 
      }); 
      $(':input').on('keydown', function (e) { 
       var keyCode = e.keyCode || e.which; 
       if (keyCode == 9) { 
        if (e.shiftKey) { 
         tindex = parseInt($(this).attr("tabindex")) - 1; 
         if ($(":input[tabindex='" + tindex + "']")) 
         { 
          $(":input[tabindex='" + tindex + "']").focus(); 
         } 
        } else { 
         tindex = parseInt($(this).attr("tabindex")) + 1; 
         if ($(":input[tabindex='" + tindex + "']")) 
         { 
          $(":input[tabindex='" + tindex + "']").focus(); 
         } 
        } 
        return false; 
       }     
      }); 

}

今、あなたはtabとshift + tab

を使用することができます