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


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实现多域名不同文件的调用方法
Jan 12 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
用vue设计一个日历表
Dec 03 Vue.js
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
PHP4实际应用经验篇(5)
2006/10/09 PHP
php cli 小技巧
2013/06/03 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
简单JS代码压缩器
2006/10/12 Javascript
很酷的javascript loading效果代码
2008/06/18 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
C#中的验证控件有几种
2014/03/08 面试题
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
老公给老婆的保证书
2014/04/28 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
Python实现打乒乓小游戏
2021/09/25 Python