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


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 相关文章推荐
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 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 radio 单选框获取与保持值的实现代码
2010/05/15 PHP
yii框架源码分析之创建controller代码
2011/06/28 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
javascript中window.event事件用法详解
2012/12/11 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
初识Javascript小结
2015/07/16 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
跟老齐学Python之正规地说一句话
2014/09/28 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
如何使用python切换hosts文件
2020/04/29 Python
python的Jenkins接口调用方式
2020/05/12 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
售后客服工作职责
2014/06/16 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
对公司的意见和建议
2015/06/04 职场文书
警示教育观后感
2015/06/17 职场文书
2016中秋节广告语
2016/01/28 职场文书