使用方向键控制table中文本框焦点

最新推荐文章于 2024-05-06 11:02:08 发布

nlx0201

最新推荐文章于 2024-05-06 11:02:08 发布

阅读量1.7k

点赞数 3

分类专栏： Javascript 文章标签： table button border xhtml javascript server

本文链接：https://blog.csdn.net/chartnie/article/details/6695070

版权

Javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

由于项目需要，在table列数很多，需要填写的数据量多时，往往需要用方向键来控制焦点的位置，所以就写了一个。由于keyCode的原因，目前不兼容火狐！

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        td
        {
        	border:1px #ff0000 solid;
        }
    </style>
    <script type="text/javascript" language="javascript">
        document.onkeydown = function () {
            if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
                var td1 = document.activeElement.parentNode;
                var tr1 = td1.parentNode;
                var t1 = tr1.parentNode;
                var rows = t1.rows;
                var cells = tr1.cells;
                var j = td1.cellIndex;
                var i = tr1.rowIndex;
                var inputs = "";
                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;
                }
                if (inputs != "") {
                    for (var k = 0; k < inputs.length; k++) {
                        if (inputs[k].type == "text") {
                            inputs[k].focus();
                        }
                    }
                }
            }
        }


    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <center>
    <table cellpadding="0" cellspacing="0"style="border:1px solid red;" width="600">
        <tr>
            <td></td>
            <td><input id="Text1" type="button" style="width:70px" value="11"/></td>
            <td><input id="Text2" type="button" style="width:70px" value="12" /></td>
            <td><input id="Text3" type="button" style="width:70px" value="13" /></td>
            <td><input id="Text4" type="button" style="width:70px" value="14" /></td>
            <td><input id="Text5" type="button" style="width:70px" value="15" /></td>
            <td><input id="Text6" type="button" style="width:70px" value="16" /></td>
            <td><input id="btn9" type="button" style="width:70px" value="17" /></td>
        </tr>
        <tr>
            <td></td>
            <td><input id="t1_1" type="text" style="width:70px" value="11"/></td>
            <td><input id="t1_2" type="text" style="width:70px" value="12" /></td>
            <td><input id="t1_3" type="text" style="width:70px" value="13" /></td>
            <td><input id="t1_4" type="text" style="width:70px" value="14" /></td>
            <td><input id="t1_5" type="text" style="width:70px" value="15" /></td>
            <td><input id="t1_6" type="text" style="width:70px" value="16" /></td>
            <td><input id="btn7" type="button" style="width:70px" value="17" /></td>
        </tr>
        <tr>
            <td><input id="btn5" type="button" style="width:70px" value="17" /></td>
            <td><input id="t2_1" type="text" style="width:70px" value="21" /></td>
            <td><input id="t2_2" type="text" style="width:70px" value="22" /></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>
            <td><input id="btn6" type="button" style="width:70px" value="17" /></td>
        </tr>
        <tr>
            <td><input id="btn1" type="button" style="width:70px" value="17" /></td>
            <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>
            <td><input id="btn2" type="button" style="width:70px" value="1-7" /></td>
        </tr>
        <tr>
            <td><input id="btn4" type="button" style="width:70px" value="1-7" /></td>
            <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>
            <td><input id="btn3" type="button" style="width:70px" value="1-7" /></td>
        </tr>
        <tr>
            <td><input id="btn10" type="button" style="width:70px" value="1-7" /></td>
            <td><input id="btn11" type="button" style="width:70px" value="1-1"/></td>
            <td><input id="btn12" type="button" style="width:70px" value="1-2" /></td>
            <td><input id="btn13" type="button" style="width:70px" value="1-3" /></td>
            <td><input id="btn14" type="button" style="width:70px" value="1-4" /></td>
            <td><input id="btn15" type="button" style="width:70px" value="1-5" /></td>
            <td><input id="btn16" type="button" style="width:70px" value="1-6" /></td>
            <td><input id="btn17" type="button" style="width:70px" value="1-7" /></td>
        </tr>
    </table>
    </center>
    </div>
    </form>
</body>
</html>