Posted in Javascript onMarch 08, 2013
做项目时,客户提出这样一个要求,在列表中的文本框里输入数据时,要能够通过上下左右键来切换光标,按回车键就把光标移到下一个文本框。这样就省得一直去用鼠标了,操作起来更方便。
不废话,上代码。
<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>
搞定!
通过上下左右键和回车键切换光标实现代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@