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


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>

搞定!
Javascript 相关文章推荐
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 #Javascript
jquery怎样实现ajax联动框(一)
Mar 08 #Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 #Javascript
很好用的js日历算法详细代码
Mar 07 #Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 #Javascript
JS链式调用的实现方法
Mar 07 #Javascript
jQuery滚动加载图片效果的实现
Mar 06 #Javascript
You might like
php检测图片木马多进制编程实践
2013/04/11 PHP
调整PHP的性能
2013/10/30 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
mailto的使用技巧分享
2012/12/21 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
Python的另外几种语言实现
2015/01/29 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
书法培训心得体会
2014/01/05 职场文书
入党申请自荐书范文
2014/02/11 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
文员岗位职责
2015/02/04 职场文书
永远是春天观后感
2015/06/12 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
JavaScript实现优先级队列
2021/12/06 Javascript
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL