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


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实现计算加载页面所用的时间
Apr 02 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
js闭包学习心得总结
Apr 17 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 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实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
Javascript 类型转换方法
2010/10/24 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
JavaScript实现通讯录功能
2020/12/27 Javascript
Python学习入门之区块链详解
2017/07/25 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
python turtle 绘制太极图的实例
2019/12/18 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
机电职业生涯规划书范文
2014/03/08 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
李敖北大演讲稿
2014/05/24 职场文书
火灾现场处置方案
2014/05/28 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
初三语文教学反思
2016/03/03 职场文书