通过上下左右键和回车键切换光标实现代码

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

  不废话,上代码。

  

复制代码 代码如下:

  <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>

  搞定!