[英]How to set tab order for html from horizontally?
I have a multiple form, contains 2 input boxes and a submit button. 我有一个多重表单,包含2个输入框和一个提交按钮。 i have given tab order for each input.
我给每个输入的制表顺序。 i have tab index for each input type.
我有每种输入类型的标签索引。 tab order is moving vertically than horizontally .
制表符顺序垂直移动而不是水平移动。 it should go to first input box , second input box and then submit button.
它应该转到第一个输入框,第二个输入框,然后提交按钮。
Below is the code. 下面是代码。
<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>
below is the js code 下面是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;
}
});
});
its a dynamic form which is coming in loop and contains many fields. 它是一个动态形式,它循环出现并包含许多字段。 i want to give tab order for only 3 input fields.
我只想为3个输入字段指定制表符顺序。
http://jsfiddle.net/mWLtp/5/ http://jsfiddle.net/mWLtp/5/
Please help me in solving this issue. 请帮助我解决这个问题。 Thank in advance.
预先感谢。
var index = 1;
$("form input").each(function () {
$(this).attr("tabindex", index);
index++;
});
HTML WAY
Well You Can Directly Give Tabindex DEMO HTML WAY
您可以直接给Tabindex 演示
<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>
well, if you dont define a tabindex attribute it defaults to horizontal, you dont need any tabindex or jquery 好吧,如果您不定义默认为水平的tabindex属性,则不需要任何tabindex或jquery
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>
Give to individual tabindex value,instead of override
your tabindex value. 赋予每个tabindex值,而不是
override
您的tabindex值。
All the tabindex=1
will be taken in order from top to bottom, no matter if you have placed them in single <div>
or different. 所有
tabindex=1
都会按照从上到下的顺序进行,无论您将它们放在单个<div>
还是其他位置。 Then will come the turn of tabindex=2
. 然后轮到
tabindex=2
。
Your Solution: 您的解决方案:
Change the tabindex like 1,2,3,4,5,6.. instead of 1,2,3,1,2,3,... 更改tabindex像1,2,3,4,5,6 ..而不是1,2,3,1,2,3,...
Hope this helps. 希望这可以帮助。 :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.