如何从水平设置html的标签顺序？答案

【问题标题】：How to set tab order for html from horizontally?如何从水平设置html的标签顺序？
【发布时间】：2014-06-21 06:36:25
【问题描述】：

我有一个多重表单，包含 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/

请帮我解决这个问题。提前致谢。

【问题讨论】：

Like this
@pushpa : 删除 js 代码并删除 tabindex 属性，它会水平工作，你不需要为此做任何事情

标签： javascript jquery html css forms

【解决方案1】：

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>

【讨论】：

它是一种动态形式，它正在循环中并包含许多字段。我只想为 3 个输入字段提供 Tab 键顺序。

【解决方案2】：

jQuery WayDEMO

var index = 1;

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

HTML WAY那你可以直接给TabindexDEMO

<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属性，它默认为horizontal，你不需要任何tabindex或jquery

【讨论】：

谢谢。我想，我可以使用 jquery 方式添加 tabindex。因为它是一种动态形式，它正在循环中并包含许多字段。我只想为 3 个输入字段下订单。所以我不能在 HTML 中给出单独的索引值。
如果想要使用 jquery 的垂直标签索引怎么办？

【解决方案3】：

所有tabindex=1 将按从上到下的顺序排列，无论您是否将它们放在单个<div> 或不同的位置。然后轮到tabindex=2。

您的解决方案：

将 tabindex 更改为 1,2,3,4,5,6.. 而不是 1,2,3,1,2,3,...

希望这会有所帮助。 :)

【讨论】：

【解决方案4】：

给单独的 tabindex 值，而不是 override 你的 tabindex 值。

JSFIDDLE DEMO

【讨论】：

它是一种动态形式，它正在循环中并包含许多字段。我只想为 3 个输入字段提供 Tab 键顺序。