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


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 相关文章推荐
javascript call方法使用说明
Jan 11 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
package.json各个属性说明详解
Mar 11 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中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
浅析php单例模式
2014/11/25 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
Python深入学习之闭包
2014/08/31 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
谈谈Python中的while循环语句
2019/03/10 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
Python socket处理client连接过程解析
2020/03/18 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
医学院学生求职简历的自我评价
2013/10/24 职场文书
工业自动化专业毕业生推荐信
2013/11/18 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
博物馆观后感
2015/06/05 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang