Question

我有一个多表格，包含2个输入框和一个提交按钮。我已经为每个输入提供了Tab键顺序。我有每个输入类型的选项卡索引。 Tab键顺序垂直移动而不是水平移动。它应该转到第一个输入框，第二个输入框然后提交按钮。

以下是代码。

<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 DEMO

var index = 1;

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

HTML WAY你可以直接给Tabindex DEMO

<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 DEMO

Answer 4

所有tabindex=1都将按顺序从上到下进行，无论您是将它们放在单<div>内还是不同。然后转到tabindex=2。

您的解决方案：

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

希望这会有所帮助。：）

如何从水平设置html的Tab键顺序？

4 个答案: