想做个按键切换焦点的JS 怎么弄？

三个输入框：
姓名<input type='text' name='txt1'><br />
手机<input type='text' name='txt2'><br />
昵称<input type='text' name='txt3'><br />
<button id='btn1'>下一个</button>
按钮描述：没有input获得焦点时，点击按钮第一个input获得焦点，有input获得焦点时，点击按钮下一个input获得焦点。
这个要怎么弄呢？当有INPUT获得焦点当前INPUT的下一个元素呢？当按钮onclick被触发时，此时的focus是#documnet了，而不是input了？是不是？
要怎么做呢？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>

</style>
</head>
<body>
姓名<input type='text' name='txt1'><br />
手机<input type='text' name='txt2'><br />
昵称<input type='text' name='txt3'><br />
<button id='btn1'>下一个</button>
<script>
var $ = function(id){
return document.getElementById(id);
};
var $t = function(tag, cot){
cot = cot || document;
return cot.getElementsByTagName(tag);
};

var objs = $t('input');
var i = 0;
$('btn1').onclick = function(){
objs[i].focus();
i = i > 1 ? 0 : i + 1;
}

</script>
</body>
</html>楼主这个意思？
<html>
<head>
<script>
function xyz() {
var inputs1 = document.getElementsByTagName("input");
for (var i = 0; i < inputs1.length; i ++) {
if (inputs1[i].inputing == "true") {
  inputs1[i].inputing = "false";
  inputs1[(i + 1) % inputs1.length].focus();
  return;
}
  }
if (inputs1[0]) {
          inputs1[0].inputing = "false";
    inputs1[0].focus();
        }
      }
      function initInputing(inputObject) {
        var inputs2 = document.getElementsByTagName("input");
        for (var i = 0; i < inputs2.length; i ++) {
  if (inputs2[i] == inputObject) {
  inputs2[i].inputing = "true";
  }
  else {
  inputs2[i].inputing = "false";
  }
    }
      }
</script>
</head>
<body>
<center>
姓名<input type="text" name="txt1" inputing = "false" onfocus = "initInputing(this)"><br/>
手机<input type="text" name="txt2" inputing = "false" onfocus = "initInputing(this)"><br/>
昵称<input type="text" name="txt3" inputing = "false" onfocus = "initInputing(this)"><br/>
<button id="btn1" onclick = "xyz()">下一个</button>
</center>
</body>
</html>
sorry 刚才的tab影响拍板这次换成空格就好了
<html>
<head>
<script>
      function xyz() {
      var inputs1 = document.getElementsByTagName("input");
      for (var i = 0; i < inputs1.length; i ++) {
        if (inputs1[i].inputing == "true") {
            inputs1[i].inputing = "false";
            inputs1[(i + 1) % inputs1.length].focus();
            return;
        }
      }
        if (inputs1[0]) {
          inputs1[0].inputing = "false";
          inputs1[0].focus();
        }
      }
      function initInputing(inputObject) {
        var inputs2 = document.getElementsByTagName("input");
        for (var i = 0; i < inputs2.length; i ++) {
          if (inputs2[i] == inputObject) {
            inputs2[i].inputing = "true";
          }
          else {
            inputs2[i].inputing = "false";
          }
        }
      }
</script>
</head>
<body>
<center>
姓名<input type="text" name="txt1" inputing = "false" onfocus = "initInputing(this)"><br/>
手机<input type="text" name="txt2" inputing = "false" onfocus = "initInputing(this)"><br/>
昵称<input type="text" name="txt3" inputing = "false" onfocus = "initInputing(this)"><br/>
<button id="btn1" onclick = "xyz()">下一个</button>
</center>
</body>
</html>
给每个INPUT加个属性~~通过这个做标识来切换，想过这样做，没有动手，如果不加自定义属性之类的，有什么方法没？
2楼的方法能实现按键从第一个开始循环切换焦点，但是如果一开始已经有一个焦点存在，比如input[1]了，再按键切换就不能跳到下一个input了。
2楼的方法把i》1换成input标签的长度那就更完美了
var $t = function(tag, cot){
                cot = cot || document;
                return cot.getElementsByTagName(tag);
            };这三行代码什么意思新人求解::::
tag,cot 这俩参数是干什么用的 cot = cot || document; 这是干嘛? 谢谢你
tag是传入的标签名这里是input，
cot是当前对象，默认是document，不设置就可以了
结合大家的帮助，自己用JQ 写了一个还算完整的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>层次选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<style type='text/css'>
.foc{background-color:#d8c98d;color:#1600e1;}
</style>
<script type="text/javascript">
$(function(){
$("table input[type=text]").attr("isfocus",false);
$("table input[type=text]").bind("focus" ,function() {
$(this).addClass("foc");
$("table input[type=text]").attr("isfocus",false);
$(this).attr("isfocus",true);
}).blur(function() {
$(this).removeClass("foc");
});
var i=0;
var $focus='';
$("#btn2").click(function() {
$focus=$("input[isfocus=true]");
var m=$("input[type=text]").index($focus);
if(m>=0) {
i=i>($("input[type=text]").length-2)?0:m+1;
}
//$("input[type=text]").eq(i).trigger("focus");
$("input[type=text]")[i].focus();
});
$("input[type=text]").keyup(function(e) {
if(e.which==13) {
$("#btn2").trigger("click");
}
});
});
</script>
  </head>
  <br/>
    <br/>
  <body>
<table width="300" border="0" align="center" id="tb">
  <tr>
<td>姓名</td>
<td>
<input type="text" name="txt1"/>
</td>
  </tr>
  <tr>
<td>年龄</td>
<td><input type="text" name="txt2"/></td>
  </tr>
  <tr>
<td>手机</td>
<td><input type="text" name="txt3"/></td>
  </tr>
  <tr>
<td>性别</td>
<td><input type="radio" name="radio" checked='checked'/>男 <input type="radio" name="radio"/>女</td>
  </tr>
</table>
<table align="center" width="200" border="0">
<tr align="center">
<td><input type="button" value="选取 parent > child 项" id="btn1"/></td>
</tr>
<tr align="center">
<td><input type="button" value="切换焦点" id="btn2"/></td>
</tr>
</table>
  </body>
</html>
和5L的方法类似，只是用JQ添加属性，不占用 html的空间。
用JS话，可以考虑设置一个数组，遍历需要切换焦点的元素，放到一个数组里面，设置初始值，当出现focus时，就改变数组里的值，切换时，通过判断数组里的值，来处理下一个位置。