tabindex可以更改TAB鍵的移動順序，tabindex的值爲負時，將排除在外。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.boxParent{float:left;}
.xialaBox{
width:173px;
height:200px;
/*line-height: 200px;*/
border:1px solid #ccc;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="boxParent">
<input type="text" class="inph" tabindex="1">
<div class="xialaBox">
1
</div>
</div>
<div class="boxParent">
<input type="text" class="inph" tabindex="2">
<div class="xialaBox">
2
<input type="text" tabindex="-1">
</div>
</div>
<div class="boxParent">
<input type="text" class="inph" tabindex="3">
<div class="xialaBox">
3
<input type="text" tabindex="-1">
</div>
</div>
</div>
<script>
var box = document.querySelector(".box");
var inp = document.querySelectorAll("input[type=text].inph");
var xialaBox = document.querySelectorAll(".xialaBox");
var count = -1;
for(var i = 0; i < inp.length; i++)
{
inp[i].index = i;
inp[i].onclick = function()
{
count = this.index;
for(var i = 0; i < xialaBox.length; i++)
{
if(i != this.index)
{
xialaBox[i].style.display = "none";
}
}
xialaBox[this.index].style.display = "block";
}
}
window.onkeydown = function(keyEvent){
var keyEvent = keyEvent ? keyEvent : window.event;
var keyCode = keyEvent.which ? keyEvent.which : keyEvent.keyCode;
// console.log(keyCode);
switch (keyCode){
case 9:
count ++;
if(count > inp.length)
{
count = inp.length-2;
}
console.log(count);
inp[count].click();
// for(var i = 0; i < xialaBox.length; i++)
// {
// if(i != count)
// {
// xialaBox[i].style.display = "none";
// }
// }
// xialaBox[count].style.display = "block";
break;
}
}
</script>
</body>
</html>