如何在按Tab键时通过HTML元素进行旋转? [英] How to rotate over HTML elements when pressing Tab key?
本文介绍了如何在按Tab键时通过HTML元素进行旋转?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在按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屋!
查看全文