如何在按Tab键时通过HTML元素进行旋转？ [英] How to rotate over HTML elements when pressing Tab key?

问题描述

不使用JQuery

如何在按Tab键时旋转HTML元素？

例如 >
在此表单中

 < form> 
字段1：< input type =textid =field1tabindex = 1 />< br /> 
栏位2：< input type =textid =field2tabindex = 2 />< br /> 
栏位3：< input type =textid =field3tabindex = 3 />< br /> 
栏位4：< input type =textid =field3tabindex = 4 />< br /> 
< / form> 
  

当用户连续按下Tab键时
重点项目将是

field1 - > field2 - > field3 - > field4 - > field1 - > field2 - > field3 - > field4 - > field1 - > ...

等等

解决方案

试试这个 AFTER field4：

 < script type =text / javascript> 
 var myInput = document.getElementById（field4）; 
 if（myInput.addEventListener）{
 myInput.addEventListener（'keydown'，this.keyHandler，false）; 
} else if（myInput.attachEvent）{
 myInput.attachEvent（'onkeydown'，this.keyHandler）; / *该死的IE破解* / 
} 
 
函数keyHandler（e）{
 var TABKEY = 9; 
 if（e.keyCode == TABKEY）{
 if（e.preventDefault）{
 e.preventDefault（）; 
} 
 document.getElementById（'field1'）。focus（）; 
返回false; 
} 
} 
< / script> 
  

Without using JQuery
How to rotate over HTML elements when pressing Tab key??
For example
In this form

<form>
    Field 1: <input type="text" id="field1" tabindex=1 /><br />
    Field 2: <input type="text" id="field2" tabindex=2 /><br />
    Field 3: <input type="text" id="field3" tabindex=3 /><br />
    Field 4: <input type="text" id="field3" tabindex=4 /><br />     
</form>  

When user press Tab key continuously
The focused items will be
field1 -> field2 -> field3 -> field4 -> field1 -> field2 -> field3 -> field4 -> field1 -> ...
And so on

解决方案

Try this AFTER field4:

<script type="text/javascript">
var myInput = document.getElementById("field4");
if(myInput.addEventListener ) {
    myInput.addEventListener('keydown',this.keyHandler,false);
} else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

function keyHandler(e) {
    var TABKEY = 9;
    if(e.keyCode == TABKEY) {
        if(e.preventDefault) {
            e.preventDefault();
        }
        document.getElementById('field1').focus();
        return false;
    }
}
</script>

这篇关于如何在按Tab键时通过HTML元素进行旋转？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！