在一个页面中可能有一些hidden控件和一些按钮,另外在这个页面中部有一个表格
在该表格的每一个单元格中有一个文本框用于输入数值,表格的行数和列数不确定
所以文本框的个数也不确定,怎样实现使用左右上下键在这些文本框之间快速移动录入焦点并使文本框中获得焦点时让文本框中的内容select()

解决方案 »

  1.   

    首先给他们设置tabindex(有规律的),当触发上下左右键的时候判断当前索引,然后再让你想要的框框选中
      

  2.   

    用jquery自己写个插件。
    为防止和其他插件冲突,给要实现该效果的文本框,多加个class或ID的属性。
      

  3.   

    以下是一个简略的思路,需要灵活运用(输入框的id要用规律)
    <table>
    <tr>
    <td><input type="text" id="1" onkeydown="chCursor(this, event)" value="1"></td>
    <td><input type="text" id="2" onkeydown="chCursor(this, event)" value="2"></td>
    <td><input type="text" id="3" onkeydown="chCursor(this, event)" value="3"></td>
    </tr>
    <tr>
    <td><input type="text" id="4" onkeydown="chCursor(this, event)" value="4"></td>
    <td><input type="text" id="5" onkeydown="chCursor(this, event)" value="5"></td>
    <td><input type="text" id="6" onkeydown="chCursor(this, event)" value="6"></td>
    </tr>
    <tr>
    <td><input type="text" id="7" onkeydown="chCursor(this, event)" value="7"></td>
    <td><input type="text" id="8" onkeydown="chCursor(this, event)" value="8"></td>
    <td><input type="text" id="9" onkeydown="chCursor(this, event)" value="9"></td>
    </tr>
    <tr>
    <td><input type="text" id="10" onkeydown="chCursor(this, event)" value="10"></td>
    <td><input type="text" id="11" onkeydown="chCursor(this, event)" value="11"></td>
    <td><input type="text" id="12" onkeydown="chCursor(this, event)" value="12"></td>
    </tr>
    </table><script language="javascript">
    function chCursor(obj, e){
    if(e.keyCode == 37){
    if((parseInt(obj.id) - 1) < 1)return false;
    document.getElementById(parseInt(obj.id) - 1).focus();
    }
    if(e.keyCode == 38){
    if((parseInt(obj.id) - 3) < 1)return false;
    document.getElementById(parseInt(obj.id) - 3).focus();
    }
    if(e.keyCode == 39){
    if((parseInt(obj.id) + 1) > 12)return false;
    document.getElementById(parseInt(obj.id) + 1).focus();
    }
    if(e.keyCode == 40){
    if((parseInt(obj.id) + 3) > 12)return false;
    document.getElementById(parseInt(obj.id) + 3).focus();
    }
    }
    </script>