[Javascript] Js Tab键切换至指定组件

<!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键切换至指定组件

猜你喜欢
