通过HTML表单旋转的tabindex [英] Rotate tabindex through html form
问题描述
我有被用作开票接口,一个PHP生成的形式。用户通过形式由pressing 设置页
工作的方式。我需要通过的形式,直到他们完成开票流程旋转Tab键。
I have a PHP-generated form that is used as an invoicing interface. Users work their way through the form by pressing tab
. I need to rotate the tab key through the form until they finalize the invoicing process.
例如,用这种形式:
<form>
<input type = "text" name="a" tabindex=1>
<input type = "text" name="b" tabindex=2>
<input type = "text" name="c" tabindex=3>
<input type = "text" name="d" tabindex=4>
<input type = "text" name="e" tabindex=5>
<input type = "text" name="f" tabindex=6>
<input type = "button" name="g" tabindex=7>
<input type = "submit" name="h" tabindex=8>
</form>
我需要的选项卡索引移动从1到7,然后标签应该将他们带回领域的。它需要旋转,我需要将光标移动到时候我preSS ESC小时。
I need to move the tab index from 1 to 7, and then tab should move them back to field a. It needs to rotate and I need to move cursor to h when I press ESC.
示例 -
Tab键移动从A-> B-> C-> D-> E-> F-> G-> A-> B光标 - > ......->先按g
ESC键只需将光标移动到h
我怎么能做到这一点的HTML或JavaScript?
How can I do this in HTML or javascript?
推荐答案
我使用的名称的ID来代替。猜猜这有助于:
I used id instead of names. Guess this helps:
<form>
<input type = "text" id="a" tabindex=1/>
<input type = "text" id="b" tabindex=2/>
<input type = "text" id="c" tabindex=3/>
<input type = "text" id="d" tabindex=4/>
<input type = "text" id="e" tabindex=5/>
<input type = "text" id="f" tabindex=6/>
<input type = "button" id="g" value="next" tabindex=7/>
<input type = "submit" id="h" value="ok" tabindex=8/>
</form>
<script type="text/javascript">
$('input').keydown(function(event){
if(event.keyCode == 9 && $(event.target).is('#g') ){
$('#a').focus();
event.preventDefault();
}
else if (event.keyCode == 27){
$('#h').focus();
event.preventDefault();
}
});
</script>
这篇关于通过HTML表单旋转的tabindex的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!