一. 介绍
有时候也没输入框，我们需要指定的几个焦点进行切换，故此所写。
二. Js 源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
| <!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) {
/**
* 指定组件焦点
* 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 = 2 < i ? 0 : i;
} else if (13 === e.keyCode || 32 === e.keyCode) {
/**
* 页面加载完成 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();
}
}
}
function onCheck() {
alert(document.getElementById("ip_3").value);
}
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>
|
三. 实现效果如下
