想要跳過基於tabindex屬性的文本框

在一行中有5個文本框，並且每個文本框都有一個特定的複選框。當我檢查第3個複選框時，當我從第1個文本框中選擇表示時，我按TAB KEY鍵它會去第二個文本框，當我按下另一個時間TAB KEY時，現在這次它會滑動第三個文本框（因爲這次我已經檢查了第三個複選框）。確保這次我也能夠增加值textbox.Only只是想要做的是在製表第三個文本框將滑動。 enter code here想要跳過基於tabindex屬性的文本框

<head> 
    <title>TAB PROGRAM</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <!-- define the toggle function --> 
    <script type="text/javascript"> 
     function toggleState(item) { 

      if (document.getElementById("check" + item).checked == true) { 

       document.getElementById("realname" + (item + 1)).focus(); 

      } 

     } 
    </script> 
</head> 
<body> 
    <form ACTION="" METHOD=POST> 
     <table BORDER CELLPADDING=10 CELLSPACING=10> 
      <tr> 
       <td>Enter Full name: 
        <input type="text" id="relanme1" tabindex="1" onfocus="toggleState(1)"> 
        <input type="checkbox" id="check1" value="check1" tabindex="-1"> 
       </td> 
       <td> 
        <input type="text" id="realname2" class="test" onfocus="toggleState(2)"> 
        <input type="checkbox" id="check2" value="check2" tabindex="-1" /> 
       </td> 
       <td> 
        <input type="text" id="realname3" class="test" onfocus="toggleState(3)"> 
        <input type="checkbox" id="check3" value="check3" tabindex="-1" /> 
       </td> 
       <td> 
        <input type="text" id="realname4" class="test" onfocus="toggleState(4)"> 
        <input type="checkbox" id="check4" value="check4" tabindex="-1" /> 
       </td> 
       <td> 
        <input type="text" id="realname5" class="test" onfocus="toggleState(5)"> 
        <input type="checkbox" id="check5" value="check5" tabindex="-1" /> 
       </td> 
     </table> 
    </form> 
</body> 

</html>

來源

2014-09-10 HHG

更改input的tabindex每次點擊複選框。這將跳過當您瀏覽使用TAB的元素，但磨片你點擊它

HTML它不會阻止獲取焦點：

<input type="text" id="realnme1" tabindex="1"> 
<input type="checkbox" id="check1" value="check1" tabindex="-1" onchange="toggle('1')">

JS：

function toggle(item) { 
    if ($('#check' + item).is(':checked')) { 
     $('#realname' + item).prop('tabindex', -1); 
    } else { 
     $('#realname' + item).prop('tabindex', item); 
    } 
}

這裏你可以找到完整的例子： http://jsfiddle.net/owrazh7h/1/

來源

2014-09-10 12:59:26

謝謝..這是工作.. – HHG 2014-09-11 05:57:20

想要跳過基於tabindex屬性的文本框

回答

相關問題