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


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 相关文章推荐
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
JS敏感词过滤代码
Dec 23 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
canvas绘制环形进度条
Feb 23 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
vue 组件开发原理与实现方法详解
Nov 29 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
如何使JavaScript休眠或等待
Apr 27 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
收音机指标测试方法及仪器
2021/03/01 无线电
thinkphp实现图片上传功能分享
2014/03/04 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
javascript 主动派发事件总结
2011/08/09 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
Python中的XML库4Suite Server的介绍
2015/04/14 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
安全承诺书范文
2014/03/26 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
委托证明范本
2014/11/25 职场文书
2015年公务员工作总结
2015/04/24 职场文书
如何用python插入独创性声明
2021/03/31 Python
2022年四月新番
2022/03/15 日漫
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python