<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tab Key Chanage</title>
<style type="text/css">
#formBox ul {
width: 600px;
}
#formBox ul li {
margin: 8px;
float: left;
list-style-type: none;
}
</style>
<script type="text/javascript">
var i = 0;
var arrays = new Array(1, 2, 4);
window.onkeydown = function(e) {
if(9 === e.keyCode) { // Tab 键
/**
* 指定组件焦点
* i = 0; arrays[i] = 1; id = "ip_1";
* document.getElementById("ip_" + arrays[i]).focus(); [当前组件的下一个组件获取焦点]
* 按下Tab键 指向
* ip_(1 + 1) ----> ip_2 [输入框2]
* ++i;
* ip_(2 + 1) ----> ip_3 [检测-按钮]
* ++i;
* ip_(4 + 1) ----> ip_5 [确认-按钮]
*/
document.getElementById("ip_" + arrays[i]).focus();
++i;
// 三目运算符 赋值 i
i = 2 < i ? 0 : i;
} else if (13 === e.keyCode || 32 === e.keyCode) { // Enter 回车建 || Space 空格键
/**
* 页面加载完成 i = 0;
* 第1次按下Tab时 ++i; i = 1 焦点处于 ip_2
* 第2次按下Tab时 ++i; i = 2 焦点处于 ip_3
* 第3次按下Tab时 ++i; i = 0 焦点处于 ip_5
*/
if(2 == i) { // 调用检测方法
onCheck();
}
if(0 == i) { // 调用确认方法
onSub();
}
}
}
// TODO 检测
function onCheck() {
alert(document.getElementById("ip_3").value);
}
// TODO 确认
function onSub() {
alert(document.getElementById("ip_5").value);
}
</script>
</head>
<body>
<form action="" method="post">
<p>Tab 键切换至指定组件</p>
<div id="formBox">
<ul>
<li>
输入框1: <input id="ip_1" type="text" placeholder="input 1" />
</li>
<li>
输入框2: <input id="ip_2" type="text" placeholder="input 2" />
</li>
<li>
按钮1: <input id="ip_3" type="button" value="检测" />
</li>
<li>
输入框3: <input id="ip_4" type="text" placeholder="input 3" />
</li>
<li>
按钮2: <input id="ip_5" type="button" value="确认" />
</li>
</ul>
</div>
</form>
</body>
</html>
[Javascript] Js Tab键切换至指定组件
最新推荐文章于 2022-10-01 20:04:58 发布