求输入控件的自动聚焦和键盘切换输入焦点的JS代码

   最近在想做个web版的erp系统，在用户录入数据的时候需要实现如下功能：新增一个单据后，光标自动聚焦到第一个输入框的js代码（输入控件的自动聚焦）当输入一行后，自动增加行，并且可以用方向键控制光标在输入表单中的上下左右移动，在网上搜了半天，没找个理想的代码。哪为高手能给个详细的代码，小弟在此谢过了！

解决方案 »

  1.   

    document.body.onload = obj.focus();
      

  2.   

    增加行onblur克隆一行
    捕捉方向键控制光标
      

  3.   


    <html>
    <style>
    table{
    border:1 solid blue
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function $(sId){return document.getElementById(sId)}
    var i = 1;
    function _cloneTbl(oInput){
    if(event.keyCode == 13){
    i = i+1;
    var otble = document.getElementById("otbl");
    var otbody =otble.lastChild;
    var newRow = otbody.lastChild.cloneNode(true);
    newRow.firstChild.id = "td"+i;
    newRow.firstChild.firstChild.value="";
    newRow.firstChild.firstChild.id = "txt"+i;
    otbody.appendChild(newRow)
    }
    }
    var tdIndex  = 1;
    function _keyCheck(){
    var Len = $("otbl").rows.length;
    if(event.keyCode == 38){
    for(var j=1;j<=Len;j++){
    eval("document.all.td"+j+".style.backgroundColor='#FFFFFF'");
    }
    if(tdIndex<=1){
    $("td1").style.backgroundColor = "#3366aa";
    alert('all up');
    return false;
    }else{
    tdIndex-=1;
    eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");
    }
    }
    if(event.keyCode == 40){
    for(var j=1;j<=Len;j++){
    eval("document.all.td"+j+".style.backgroundColor='#FFFFFF'");
    } if(tdIndex>=Len){
    alert('all down')
    eval("document.all.td"+Len+".style.backgroundColor='#3366aa'");

    }else{
    tdIndex+=1;
    eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");
    eval("document.all.td"+tdIndex+".focus()");
    }
    }

    }//-->
    </SCRIPT>
    <body onkeydown="_keyCheck()">
    <TABLE id="otbl">
    <TR>
    <TD id="td1"><INPUT TYPE="text" id="txt1" onkeydown="_cloneTbl(this)" ></TD>
    </TR>
    </TABLE>
    </html>
      

  4.   

    以上代码 大概实现你的需求 而且Only IE
      

  5.   

    <html>
    <style>
    table{
    border:1 solid blue
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function $(sId){return document.getElementById(sId)}
    var i = 1;
    function _cloneTbl(oInput){
    if(event.keyCode == 13){
    i = i+1;
    var otble = document.getElementById("otbl");
    var otbody =otble.lastChild;
    var newRow = otbody.lastChild.cloneNode(true);
    newRow.firstChild.id = "td"+i;
    newRow.firstChild.firstChild.value="";
    newRow.firstChild.firstChild.id = "txt"+i;
    otbody.appendChild(newRow)
    }
    }
    var tdIndex  = 1;
    function _keyCheck(){
    var Len = $("otbl").rows.length;
    if(event.keyCode == 38){
    for(var j=1;j<=Len;j++){
    eval("document.all.td"+j+".style.backgroundColor='#FFFFFF'");
    }
    if(tdIndex<=1){
    $("td1").style.backgroundColor = "#3366aa";
    alert('all up');
    return false;
    }else{
    tdIndex-=1;
    eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");
    }
    }
    if(event.keyCode == 40){
    for(var j=1;j<=Len;j++){
    eval("document.all.td"+j+".style.backgroundColor='#FFFFFF'");
    } if(tdIndex>=Len){
    alert('all down')
    eval("document.all.td"+Len+".style.backgroundColor='#3366aa'");

    }else{
    tdIndex+=1;
    eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");
    eval("document.all.td"+tdIndex+".firstChild.focus()");
    }
    }

    }//-->
    </SCRIPT>
    <body onkeydown="_keyCheck()">
    <TABLE id="otbl">
    <TR>
    <TD id="td1"><INPUT TYPE="text" id="txt1" onkeydown="_cloneTbl(this)" ></TD>
    </TR>
    </TABLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    $("txt1").focus();
    //-->
    </SCRIPT>
    </html>
      

  6.   

    <html>
    <style>
    table{
    border:1 solid blue
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function $(sId){return document.getElementById(sId)}
    var i = 1;
    function _cloneTbl(oInput){
    if(event.keyCode == 13){
    i = i+1;
    var otble = document.getElementById("otbl");
    var otbody =otble.lastChild;
    var newRow = otbody.lastChild.cloneNode(true);
    newRow.firstChild.id = "td"+i;
    newRow.firstChild.firstChild.value="";
    newRow.firstChild.firstChild.id = "txt"+i;
    otbody.appendChild(newRow)
    }
    }
    var tdIndex  = 1;
    function _keyCheck(){
    var Len = $("otbl").rows.length;
    if(event.keyCode == 38){
    for(var j=1;j<=Len;j++){
    eval("document.all.td"+j+".style.backgroundColor='#FFFFFF'");
    }
    if(tdIndex<=1){
    $("td1").style.backgroundColor = "#3366aa";
    alert('all up');
    return false;
    }else{
    tdIndex-=1;
    eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");
    eval("document.all.td"+tdIndex+".firstChild.focus()");
    }
    }
    if(event.keyCode == 40){
    for(var j=1;j<=Len;j++){
    eval("document.all.td"+j+".style.backgroundColor='#FFFFFF'");
    } if(tdIndex>=Len){
    alert('all down')
    eval("document.all.td"+Len+".style.backgroundColor='#3366aa'");

    }else{
    tdIndex+=1;
    eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");

    }
    }

    }//-->
    </SCRIPT>
    <body onkeydown="_keyCheck()">
    <TABLE id="otbl">
    <TR>
    <TD id="td1"><INPUT TYPE="text" id="txt1" onkeydown="_cloneTbl(this)" ></TD>
    </TR>
    </TABLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    $("txt1").focus();
    //-->
    </SCRIPT>
    </html>
    最新的：改了能够取得焦点 上下键
      

  7.   


    <html>
    <style>
    table{
    border:1 solid blue
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function $(sId){return document.getElementById(sId)}
    var i = 1;
    function _cloneTbl(oInput){
    if(event.keyCode == 13){
    i = i+1;
    var otble = document.getElementById("otbl");
    var otbody =otble.lastChild;
    var newRow = otbody.lastChild.cloneNode(true);
    newRow.firstChild.id = "td"+i;
    newRow.firstChild.firstChild.value="";
    newRow.firstChild.firstChild.id = "txt"+i; otbody.appendChild(newRow)
    newRow.firstChild.firstChild.focus();
    }
    }
    var tdIndex  = 1;
    function _keyCheck(){
    var Len = $("otbl").rows.length;
    if(event.keyCode == 38){
    for(var j=1;j<=Len;j++){
    eval("document.all.td"+j+".style.backgroundColor='#FFFFFF'");
    }
    if(tdIndex<=1){
    $("td1").style.backgroundColor = "#3366aa";
    alert('all up');
    return false;
    }else{
    tdIndex-=1;
    eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");
    eval("document.all.td"+tdIndex+".firstChild.focus()");
    }
    }
    if(event.keyCode == 40){
    for(var j=1;j<=Len;j++){
    eval("document.all.td"+j+".style.backgroundColor='#FFFFFF'");
    } if(tdIndex>=Len){
    alert('all down')
    eval("document.all.td"+Len+".style.backgroundColor='#3366aa'");

    }else{
    tdIndex+=1;
    eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");

    }
    }

    }//-->
    </SCRIPT>
    <body onkeydown="_keyCheck()">
    <TABLE id="otbl">
    <TR>
    <TD id="td1"><INPUT TYPE="text" id="txt1" onkeydown="_cloneTbl(this)" ></TD>
    </TR>
    </TABLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    $("txt1").focus();
    //-->
    </SCRIPT>
    </html>
    第一个问题解决
    第2个问题没看懂 左右键想干嘛？？我快下班了