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


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中两种链式调用实现代码
Jan 12 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 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下把数组保存为文件格式的实例应用
2010/02/08 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
Python实现程序的单一实例用法分析
2015/06/03 Python
利用python求相邻数的方法示例
2017/08/18 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Django框架视图函数设计示例
2019/07/29 Python
pycharm 安装JPype的教程
2019/08/08 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
python 调用Google翻译接口的方法
2020/12/09 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
机动车交通事故协议书
2015/01/29 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
Python实现日志实时监测的示例详解
2022/04/06 Python
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏
JavaScript实现音乐播放器
2022/08/14 Javascript