JQuery的 - 輸入端之間上輸入根據的tabindex

頁

<div id="testDialog" class="dialogContent"> 
<form:form action="#" id="testForm"> 
    <table> 
     <tr> 
      <td>one</td> 
      <td><input id="c1" type="text" maxlength="45" tabindex="49"/></td> 
     </tr> 
     <tr> 
      <td>two</td> 
      <td><input id="c2" type="text" maxlength="8" tabindex="50"/></td> 
     </tr> 
     <tr> 
      <td>three</td> 
      <td><input id="c3" type="text" maxlength="8" tabindex="51"/></td> 
     </tr> 
     <tr> 
      <td>four</td> 
      <td><input id="c4" type="text" maxlength="8" tabindex="52"/></td> 
     </tr> 
     <tr> 
      <td><button type="button" tabindex="53">Confirm</button></td> 
      <td><button type="button" tabindex="54">Cancel</button></td> 
     </tr> 
    </table> 
</form:form> 
</div>

我需要在進入壓機的輸入和按鈕之間切換焦點上結構切換焦點。切換順序應該按照標籤索引。切換應該在形式中循環，例如，如果焦點設置在「取消」按鈕上，則下一個輸入將在此示例中將焦點設置爲第一個輸入。我會很感激任何幫助。

來源

2013-03-09 dongidon

這應該工作：

var $targets = $('#testForm').find('input, button'), 
    steps = $targets.map(function() { 
     return $(this).attr('tabindex'); 
    }).get(); 

$('#testForm').on('keypress', 'input, button', function(e) { 
    if (e.keyCode == 13) { 
     var current = $.inArray($(this).attr('tabindex'), steps), 
      next = steps[++current % steps.length]; 
     $targets.filter('[tabindex="' + next + '"]').focus(); 
    } 
});

http://jsfiddle.net/BHA9g/2/

這也是很重要的輸入週期正確地從任何領域開始，不僅是第一個。

來源

2013-03-09 14:41:59 dfsq

非常感謝，很好的解決方案。但似乎它不考慮tabindex順序（我試圖改變tabindex排序）。我嘗試爲'tab'添加相同的行爲（if（e.keyCode == 13 || e.keyCode == 9）），不幸的是它不會週期性地切換'tab'輸入。你能幫忙找出答案嗎？ – dongidon 2013-03-09 21:19:15

在步驟定義中將.get（）更改爲.sort（）使其尊重tabindex順序。 – Paralife 2015-01-31 11:55:06

如果您要添加一個名爲'TabOnEnter'的類到您想循環輸入的字段中。

$(document).on("keypress", ".TabOnEnter" , function(e) 
     { 

     if(e.keyCode == 13) 
     { 
      var nextElement = $('input[tabindex="' + (this.tabIndex+1) + '"]'); 

      if(nextElement.length)// this is for next element 
      nextElement.focus(); 
      else 
      $('input[tabindex="1"]').focus(); //this is for first element 
     } 
     });

來源

2013-03-09 14:28:02 PSR

JQuery的 - 輸入端之間上輸入根據的tabindex

回答

相關問題