关于回车事件


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD> <BODY>
<form name="form1">
<table>
<tr>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>c</td>
<td><input type="text" name="gender"></td>
</tr>
<tr>
<td>d</td>
</tr>
<tr>
<td>e</td>
</tr>
<tr>
<td>f</td>
<td><input type="text" name="pwd"></td>
</tr>
</table>
</form>
 </BODY>
</HTML>
这是一个简单界面，我想写一个javascript函数，要实现的是，键盘上点回车，光标自动跳到下一个类型为text的输入框中，也就是在光标在b时点回车跳到c,c点回车跳到f，f点回车就不动了，因为这是最后一个输入框了，当然我可以写死，如form1.c.focus(),但我希望能灵活些，也就是说如果再多添加几个文本框或者改了文本框的名字，javascript函数不用变

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
     </HEAD> <BODY>
        <form name="form1" onkeydown="A()" id="tForm">
            <table>
                <tr>
                    <td>a</td>
                </tr>
                <tr>
                    <td>b</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>c</td>
                    <td><input type="text" name="gender"></td>
                </tr>
                <tr>
                    <td>d</td>
                </tr>
                <tr>
                    <td>e</td>
                </tr>
                <tr>
                    <td>f</td>
                    <td><input type="text" name="pwd"></td>
                </tr>
            </table>
        </form>
     </BODY><script>function A()
    {
       var e = arguments[0] || window.event;
       var o = e.srcElement || e.target;
       var code = e.keyCode || e.which;
       if (code == 13) 
       {
           var inputs = document.getElementById("tForm").getElementsByTagName("INPUT");
           if (o == inputs[inputs.length - 1]) {inputs[0].focus();}
           else {e.keyCode = e.which = 9}
       }
    }</script>
    </HTML>
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <script language="javascript">
      function changeFocus(){
       
      if(event.keyCode==13&&event.srcElement.type!='button' && event.srcElement.type!='submit'
      &&event.srcElement.type!='reset'&&event.srcElement.type!=''&&event.srcElement.type!='textarea'){
       event.keyCode=9;
     }
    }
    document.onkeydown=changeFocus;
      </script>
     </HEAD> <BODY >
        <form name="form1">
            <table>
                <tr>
                    <td>a</td>
                </tr>
                <tr>
                    <td>b</td>
                    <td><input type="text" name="username" ></td>
                </tr>
                <tr>
                    <td>c</td>
                    <td><input type="text" name="gender"></td>
                </tr>
                <tr>
                    <td>d</td>
                </tr>
                <tr>
                    <td>e</td>
                </tr>
                <tr>
                    <td>f</td>
                    <td><input type="text" name="pwd"></td>
                </tr>
            </table>
        </form>
     </BODY>
    </HTML>
      

  3.   

    感谢楼上2位，不过还有一个问题，虽然代码中有判断是否为button等这些类型，但我测试时再c后面加了一句
    <tr>
    <td><input type="button" name="sub" value="aa"></td>
    </tr>
    结果发现c再回车还是跳到button上面去了
      

  4.   


    #1的代码，只要加的是input标签，绝对可以循环获取焦点<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
     </HEAD> <BODY>
        <form name="form1" onkeydown="A()" id="tForm">
            <table>
                <tr>
                    <td>a</td>
                </tr>
                <tr>
                    <td>b</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>c</td>
                    <td><input type="text" name="gender"></td>
                </tr>
                <tr>
                    <td>d</td>
                    <td><input type="button" name="sub" value="aa"></td>
                </tr>
                <tr>
                    <td>e</td>
                    <td><input type="button" name="sub" value="aa"></td>
                </tr>
                <tr>
                    <td>f</td>
                    <td><input type="text" name="pwd"></td>
                </tr>
            </table>
        </form>
     </BODY><script>function A()
    {
       var e = arguments[0] || window.event;
       var o = e.srcElement || e.target;
       var code = e.keyCode || e.which;
       if (code == 13) 
       {
           var inputs = document.getElementById("tForm").getElementsByTagName("INPUT");
           if (o == inputs[inputs.length - 1]) {inputs[0].focus();}
           else {e.keyCode = e.which = 9}
       }
    }</script>
    </HTML>
      

  5.   

    我的意思是，跳过button，也就是说在c点回车跳到f，而不是button aa
      

  6.   

    简单点的办法，不用input type="button"使用button标签要不js里面还要判断一堆东西，麻烦，可能还要遍历效率低下
      

  7.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <script language="javascript">
    function changeFocus(){ if(event.keyCode==13){
    event.keyCode=9;
    }
    }
    document.onkeydown=changeFocus;
    </script>
    </HEAD><BODY >
    <form name="form1">
    <table>
    <tr>
    <td>a</td>
    </tr>
    <tr>
    <td>b</td>
    <td><input type="text" name="username" ></td>
    </tr>
    <tr>
    <td>c</td>
    <td><input type="text" name="gender"></td>
    </tr>
    <tr>
    <td>d</td>
    </tr>
    <tr>
    <td>e</td>
    <td><input type="button" name="gender" value="button"></td>
    </tr>
    <tr>
    <td>f</td>
    <td><input type="text" name="pwd"></td>
    </tr>
    </table>
    </form>
    </BODY>
    </HTML>
      

  8.   


    <input type="button" name="sub" value="aa">改成<button name="sub">aa</button>
      

  9.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <script>
      document.onkeydown=function(){
        var obj=document.getElementsByTagName("input");
        var cur=event.srcElement;
        if(event.keyCode==13){
            var index=0;
            for(var i=0;i<obj.length;i++){
                if(event.srcElement==obj[i])index=i;
            }
            do{
                index=index+1;
                if(index==obj.length)index=0;
            }while(obj[index].getAttribute("type").toUpperCase()!="TEXT")
           
            obj[index].focus();
           
        }
      }
      </script>
     </HEAD> <BODY>
        <form name="form1">
            <table>
                <tr>
                    <td>a</td>
                </tr>
                <tr>
                    <td>b</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>c</td>
                    <td><input type="text" name="gender"></td>
                </tr>
                <tr>
                    <td>d</td>
                </tr>
                <tr>
                    <td>e</td>
                </tr>
                <tr>
                   <td><input type="button" name="sub" value="aa"></td>
                   </tr>
                <tr>
                    <td>f</td>
                    <td><input type="text" name="pwd"></td>
                </tr>
            </table>
        </form>
     </BODY>
    </HTML>
      

  10.   

    10楼高手，再教我最后一招，如果我的输入框是readonly的，我希望也能跳过
    <tr>
                    <td>c</td>
                    <td><input type="text" name="gender" readonly></td>
                </tr>
    也就是直接从b跳到f，解决这个就结贴
      

  11.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <script>
      document.onkeydown=function(){
        var obj=document.getElementsByTagName("input");
        var cur=event.srcElement;
        if(event.keyCode==13){
            var index=0;
            for(var i=0;i<obj.length;i++){
                if(event.srcElement==obj[i])index=i;
            }
            do{
                index=index+1;
                if(index==obj.length)index=0;
            }while(obj[index].getAttribute("type").toUpperCase()!="TEXT"||obj[index].getAttribute("readonly")==true)
           
            obj[index].focus();
           
        }
      }
      </script>
     </HEAD> <BODY>
        <form name="form1">
            <table>
                <tr>
                    <td>a</td>
                </tr>
                <tr>
                    <td>b</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>c</td>
                    <td><input type="text" name="gender"></td>
                </tr>
                <tr>
                    <td>d</td>
                </tr>
                <tr>
    <td>c</td>
    <td><input type="text" name="gender" readonly></td>
    </tr>
                <tr>
                    <td>e</td>
                </tr>
                <tr>
                   <td><input type="button" name="sub" value="aa"></td>
                   </tr>
                <tr>
                    <td>f</td>
                    <td><input type="text" name="pwd"></td>
                </tr>
            </table>
        </form>
     </BODY>
    </HTML>
      

  12.   


    var changeFocus = function(id){
    this._elements = document.getElementById(id).elements;
    this._index = 0;
    this.init();
    }
    changeFocus.prototype = {
    init: function(){
    var _self = this;
    for(var i = 0; i < this._elements.length; i++){
    (function(_i){
    _self._elements[_i].onblur = function(){_self._index = _i + 1};
    })(i)
    }
    document.onkeydown = function(e){e = e || window.event; _self.rewriteEnter(e)};
    },
    rewriteEnter: function(e){
    var _code = e.keyCode || e.which;
    var _obj = e.srcElement || e.target;
    var _type = _obj.type? true : 
    (_obj.nodeName.toLowerCase() == 'textarea')? true : 
    (_obj.nodeName.toLowerCase() == 'select')? true : false;
    if((_code == 13) && _type){
    _obj.blur();
    this.focusNext();
    }
    },
    focusNext: function(){
    if(this._index >= this._elements.length - 1){
    return false;
    }
    var _obj = this._elements[this._index];
    var _type = _obj.type.toLowerCase() || _obj.nodeName.toLowerCase();
    if((_type != 'submit') && (_type != 'reset') && (_type != 'button')){
    _obj.focus();
    }
    else{
    _obj.blur();
    this.focusNext();
    }
    }
    }