通过上下左右键和回车键切换光标实现代码
2013-03-08 00:00
218 查看
做项目时,客户提出这样一个要求,在列表中的文本框里输入数据时,要能够通过上下左右键来切换光标,按回车键就把光标移到下一个文本框。这样就省得一直去用鼠标了,操作起来更方便。
不废话,上代码。
搞定!
不废话,上代码。
<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>
搞定!
相关文章推荐
- 通过上下左右键和回车键切换光标实现代码
- 通过上下左右键和回车键切换光标
- 通过WebView向html页面注入js代码,实现WebView切换白昼模式/夜间模式
- C#:光标通过上下键或者enter键从一个textBox移动到另一个textBox或实现按键click功能
- 在xp中tc环境下实现的 销售管理系统(可切换繁体和简体,可设密码,可通过修改代码修改字体颜色)
- 在xp中tc环境下实现的 销售管理系统(可切换繁体和简体,可设密码,可通过修改代码修改字体颜色)
- 简单的,通过代码,实现光标的移动和定位
- 基于jquery实现表格中的上下左右键切换input的焦点
- js实现层的移动与上下层的切换,模仿他人代码 --firefox无法实现
- 利用jquery实现在html的表格中使用上下左右键切换单元格,同时只限制单元格输入数字
- 使用phantomjs实现highcharts等报表通过邮件发送(本文仅提供完整解决方案和实现思路,完全照搬不去整理代码无法马上得到效果)
- jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小
- Android实现移动小球和CircularReveal页面切换动画实例代码
- 每月一次、通过实现日截止日期代码
- Hadoop入门(10)_通过java代码实现从本地的文件上传到Hadoop的文件系统
- ASP中通过该日历算法实现的具体代码
- 通过代理模式,对第三方网络请求框架进行封装,实现任意切换网络框架
- 通过 spring 容器内建的 profile 功能实现开发环境、测试环境、生产环境配置自动切换
- 纯js实现背景图片切换效果代码