如何使用向上/向下箭头导航文本框

时间:2017-05-22 07:30:45

标签: javascript c# asp.net ajax

我有以下页面:

          <head runat="server">
    <title></title>
    <script type="text/javascript">
        var current = "";


        function Tab(e) {
            var evtobj = window.event ? event : e;
            var unicode = evtobj.charCode ? e.charCode : evtobj.keyCode;


            var targ;
            if (evtobj.target) targ = evtobj.target;
            else if (evtobj.srcElement) targ = evtobj.srcElement;


            if (unicode == 37) {
                var elements = document.getElementsByTagName("input");
                for (var i = 0; i < elements.length; i++) {
                    if (elements[i].tabIndex == targ.tabIndex - 1) {
                        elements[i].focus();
                        return true;
                    }
                }
            }
            else if (unicode == 39) {
                var elements = document.getElementsByTagName("input");
                for (var i = 0; i < elements.length; i++) {
                    if (elements[i].tabIndex == targ.tabIndex + 1) {
                        elements[i].focus();
                        return true;
                    }
                }
            }
            else {
                return true;
            }
        }
    </script>
</head>
<body onkeydown="return Tab(event);">
    <form id="form1" runat="server">
    <asp:TextBox ID="TextBox1" TabIndex="1" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox2" TabIndex="2" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox3" TabIndex="3" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox4" TabIndex="4" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox5" TabIndex="5" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Button" />

        <br />
    <asp:TextBox ID="TextBox6" TabIndex="6" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox7" TabIndex="7" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox8" TabIndex="8" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox9" TabIndex="9" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox10" TabIndex="10" runat="server"></asp:TextBox>
    </form>
</body>

根据每个文本框的选项卡索引,它可以正常/向左箭头导航工作正常,我需要使用向上/向下箭头执行相同操作,通过将焦点设置在当前上方或下方的文本框上来上下导航文本框,例如,如果焦点在文本框3上,我按下箭头,焦点应移动到文本框8,因为它在它下面,反之亦然。

0 个答案:

没有答案