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


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 面向对象编程 万物皆对象
Sep 17 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
vue实现几秒后跳转新页面代码
Sep 09 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
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 空格,换行,跳格使用说明
2009/12/18 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
用Python配平化学方程式的方法
2019/07/20 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
python接口自动化框架实战
2020/12/23 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
python wsgiref源码解析
2021/02/06 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
人力资源管理专业应届生求职信
2013/09/28 职场文书
装修设计师求职信
2014/02/26 职场文书
廉洁教育学习材料
2014/05/19 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
会计求职自荐信
2015/03/26 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书