通过上下左右键和回车键切换光标

    做项目时,客户提出这样一个要求,在列表中的文本框里输入数据时,要能够通过上下左右键来切换光标,按回车键就把光标移到下一个文本框。这样就省得一直去用鼠标了,操作起来更方便。

    不废话,上代码。

页面代码
<asp:GridView id="gdv" runat="server" AllowPaging="True" PageSize="50" AutoGenerateColumns="False"
            EnableModelValidation="True" Width="100%" PagerStyle-HorizontalAlign="Center">
                 <PagerSettings Visible="False" />
                 <PagerStyle HorizontalAlign="Center" />
                 <RowStyle HorizontalAlign="Center" />
                 <Columns>
                     <asp:TemplateField HeaderText="序号">
                     <ItemTemplate>
                         <asp:Label ID="lbl" runat="server" Text="<%# Container.DataItemIndex+1%>"></asp:Label>
                     </ItemTemplate>
                     </asp:TemplateField>
                     <asp:TemplateField HeaderText="名称">
                     <ItemTemplate>
                     <asp:TextBox ID="BarCode" runat="server" Width="200px" MaxLength="10"></asp:TextBox>
                     </ItemTemplate>
                     </asp:TemplateField>
                     <asp:TemplateField HeaderText="数量">
                     <ItemTemplate>
                     <asp:TextBox ID="SusFillCount" runat="server" Width="200px" onkeypress="if (event.keyCode < 48 || event.keyCode >57) event.returnValue = false;" MaxLength="5"></asp:TextBox>
                     </ItemTemplate>
                     </asp:TemplateField>
                 </Columns>
            </asp:GridView>
jquery代码
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
        $(function() {             
            $("input").eq(0).focus();
            $("input[type='text']").keydown(function() { 
                var key = event.keyCode;                 
                switch (key) {                     
                    case 37:    //left                         
                    {                             
                        if ($(this).parent().prev().length >= 1) {                                 
                            $(this).parent().prev().find("input").focus();                             
                        }                             
                        break;                         
                    }                     
                    case 38:    //up                         
                    {                             
                        if ($(this).parent().parent().prev().length >= 1) {    
                           $(this).parent().parent().prev().children().children().eq($(this).parent().prevAll().length).focus();  
                        }                             
                        break;                         
                    }                     
                    case 39:    //right                         
                    {                             
                        if ($(this).parent().next().length >= 1) {                                 
                            $(this).parent().next().find("input").focus();                             
                        }                             
                        break;                         
                    }                     
                    case 40:    //down                         
                    {                             
                        if ($(this).parent().parent().next().length >= 1) {                                 
                            $(this).parent().parent().next().children().children().eq($(this).parent().prevAll().length).focus();
                        }                             
                        break;                         
                    } 
                    case 13:  //回车
                    {
                        event.keyCode=9;
                        break;
                    }                    
                    default:                         
                    {                             
                        break;                         
                    }                 
                }             
            });         
        }); 
    </script>

搞定!

posted @ 2013-03-07 09:45  马小白  阅读(1843)  评论(0编辑  收藏  举报