首页 新闻 搜索 专区 学院

JS的键盘光标移动

0
悬赏园豆:20 [已关闭问题] 关闭于 2013-04-10 12:56
<!DOCTYPE html>

<html>






<script src="../../Scripts/jquery-1.7.1.min.js"></script>
<style type="text/css">
    td {
        border: 1px #ff0000 solid;
    }
</style>

<script type="text/javascript" language="javascript">
    $(function () {
        $(":text").focus(function () {
            this.select();
        });
    });
    document.onkeydown = function () {
        if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40 || event.keyCode == 13) {
            var td1 = document.activeElement.parentNode.parentNode;
            var tr1 = td1.parentNode;
            var t1 = "";
            if (tr1.getElementsByTagName("tr").length == 0) {
                t1 = td1.parentNode.parentNode;
            } else {
                t1 = td1.parentNode;
            }
            var rows = t1.rows;
            var cells = "";
            if (tr1.getElementsByTagName("tr").length == 0) {
                cells = tr1.cells;
            } else {
                cells = td1.cells;
            }
            var j = td1.cellIndex;
            if (j == undefined) {
                j = document.activeElement.parentNode.cellIndex;
            }
            var i = 0;
            if (tr1.rowIndex == undefined) {
                i = td1.rowIndex;
            } else {
                i = tr1.rowIndex;
            }
            var inputs = new Array();
            switch (event.keyCode) {
                case 37:
                    if (j - 1 < 0)
                        return false;
                    if (rows[i].cells[j - 1].childNodes.length != 0) {
                        inputs = rows[i].cells[j - 1].childNodes;
                    }
                    break;
                case 38:
                    if (i - 1 < 0)
                        return false;
                    if (rows[i - 1].cells[j].childNodes.length != 0) {
                        inputs = rows[i - 1].cells[j].childNodes;
                    }
                    break;
                case 39:
                    if (j + 1 >= cells.length)
                        return false;
                    if (rows[i].cells[j + 1].childNodes.length != 0) {

                            inputs = rows[i].cells[j + 1].childNodes;
                        }
                    }
                    break;
                case 40:
                    if (i + 1 >= rows.length)
                        return false;
                    if (rows[i + 1].cells[j].childNodes.length != 0) {
                        inputs = rows[i + 1].cells[j].childNodes;
                    }
                    break;
                case 13:
                    if (j + 1 >= cells.length)
                        return false;
                    if (rows[i].cells[j + 1].childNodes.length != 0) {
                        inputs = rows[i].cells[j + 1].childNodes;
                    }
                    break;
            }
            if (inputs != "") {
                for (var k = 0; k < inputs.length; k++) {
                    //alert(inputs);
                    if (inputs[k].type == "text" || inputs[k].type == "textarea" || inputs[k].type == "checkbox" || inputs[k].type == "select-one") {
                        inputs[k].focus();
                    }
                }
            }
        }
    }
</script>
<body>
    <form id="form1" runat="server">
        <div>


            <center>  
    <table id="aa" cellpadding="0" cellspacing="0"style="border:1px solid red;" width="800">
        <thead>aa</thead>
        <tbody>
        <tr>  
            <td><div><input id="t1_1" type="text" style="width:70px" value="11" /><input id="t1_1_1" type="text" style="width:70px" value="11"/></div></td>  
            <td><div><input id="t1_2" type="text" style="width:70px" value="12" /><input id="t1_2_2" type="text" style="width:70px" value="11"/></div></td>  
            <td><input id="t1_3" type="text" style="width:70px" value="13" /></td>  
            <td><select><option value="1">1</option><option value="2">2</option></select></td>  
            <td><input type="checkbox" /></td>  
            <td><textarea>16</textarea></td>  
        </tr>  
        <tr>  
            <td><input id="t2_1" type="text" style="width:70px" onblur="a(this);" value="21" /></td>  
            <td><select><option value="1">1</option><option value="2">2</option></select></td>  
            <td><input id="t2_3" type="text" style="width:70px" value="23" /></td>  
            <td><input id="t2_4" type="text" style="width:70px" value="24" /></td>  
            <td><input id="t2_5" type="text" style="width:70px" value="25" /></td>  
            <td><input id="t2_6" type="text" style="width:70px" value="26" /></td>  
        </tr>  
        <tr>  
            <td><input id="t3_1" type="text" style="width:70px" value="31" /></td>  
            <td><input id="t3_2" type="text" style="width:70px" value="32" /></td>  
            <td><input id="t3_3" type="text" style="width:70px" value="33"  /></td>  
            <td><input id="t3_4" type="text" style="width:70px" value="34"  /></td>  
            <td><input id="t3_5" type="text" style="width:70px" value="3-5"  /></td>  
            <td><input id="t3_6" type="text" style="width:70px" value="3-6"  /></td>  
        </tr>  
        <tr>  
            <td><input id="t4_1" type="text" style="width:70px" value="4-1"  /></td>  
            <td><input id="t4_2" type="text" style="width:70px" value="4-2"   /></td>  
            <td><input id="t4_3" type="text" style="width:70px" value="4-3"   /></td>  
            <td><input id="t4_4" type="text" style="width:70px" value="4-4"   /></td>  
            <td><input id="t4_5" type="text" style="width:70px" value="4-5"   /></td>  
            <td><input id="t4_6" type="text" style="width:70px" value="4-6"   /></td>  
        </tr>  
            </tbody>
    </table>  
</center>
        </div>
    </form>
</body>
</head>
</html>

 

1)  可以使用键盘上“↑”“↓”“←”“→”以及回车键来控制表格区域中输入框的光标所在位置

a)         输入“↑”键:上移到前一行的输入框,至第一行后不能再上移;

b)         输入“↓”键:下移到下一行的输入框,至最后一行后不能再下移;

c)         输入“←”键:同行左移到前一个的输入框,至同行第一个输入框后不能再左移;

d)         输入“→”键:同行右移到后一个的输入框,至同行最后一个输入框后不能再右移;

e)         输入回车键:同行右移到后一个的输入框,至同行最后一个输入框后不能再右移。

在让一个单元格中多个文本框也实现键盘的光标移动

 

2)  控制表格区域中输入框获得光标后将输入框中文字变成“选择状态”,如原来输入框中文字是“1010”,获得光标后变成“1010”。

xinshen的主页 xinshen | 初学一级 | 园豆:167
提问于:2013-01-05 14:50
< >
分享
所有回答(1)
0

问题呢 ?

卒子 | 园豆:588 (小虾三级) | 2013-01-07 13:26
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册