HTML输入字段tabindex问题

我使用Bootstrap创建HTML表单，并且输入字段索引有问题。HTML输入字段tabindex问题

这些字段在桌面上并排显示（单行中的2个字段）。现在，当按下标签时，光标会移到第二行的第一个字段，这是我不需要的。所以我通过使用tabindex

解决了这个问题。移动设备上出现了另一个问题，因为输入字段在移动设备上（每行一个字段）逐个显示。当我们按下从第一场片它进入第三场，这看起来非常奇怪，我想解决它......

这里是活生生的实例：

桌面：

.col-md-6{ 
 
width: 50%; 
 
float:left; 
 
}

<div class="col-md-6"> 
 

 
    <div class="form-group"> 
 
    <span>Field 1</span> 
 
    <input type="text" id="field1" tabindex="1"/> 
 
    </div> 
 
    <div class="form-group"> 
 
    <span>Field 3</span> 
 
    <input type="text" id="field3" tabindex="3"/> 
 
    </div> 
 
    
 
</div> 
 
<div class="col-md-6"> 
 

 
    <div class="form-group"> 
 
    <span>Field 2</span> 
 
    <input type="text" id="field2" tabindex="2"/> 
 
    </div> 
 
    <div class="form-group"> 
 
    <span>Field 4</span> 
 
    <input type="text" id="field4" tabindex="4"/> 
 
    </div> 
 
    
 
</div>

手机：

<div class="col-md-6"> 
 

 
    <div class="form-group"> 
 
    <span>Field 1</span> 
 
    <input type="text" id="field1" tabindex="1"/> 
 
    </div> 
 
    <div class="form-group"> 
 
    <span>Field 3</span> 
 
    <input type="text" id="field3" tabindex="3"/> 
 
    </div> 
 
    
 
</div> 
 
<div class="col-md-6"> 
 

 
    <div class="form-group"> 
 
    <span>Field 2</span> 
 
    <input type="text" id="field2" tabindex="2"/> 
 
    </div> 
 
    <div class="form-group"> 
 
    <span>Field 4</span> 
 
    <input type="text" id="field4" tabindex="4"/> 
 
    </div> 
 
    
 
</div>

我怎样才能解决这个问题？

来源

2017-07-13 Alena

这个问题的标题是奇数 – tech2017

有什么标题做你的问题？ – Robert

对不起，我正要问这个问题。但是，stackoverflow系统建议，这些类型的问题大多是没有答案和downvoted，所以我没有问问题。忘了更新标题。真的很抱歉。 – Alena

尝试包装你cols在rows codepen

来源

2017-07-13 12:35:30 fen1x

真棒技巧，非常感谢你！ – Alena

HTML输入字段tabindex问题

回答

相关问题