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


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 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
openlayers实现地图弹窗
Sep 25 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 友好URL的实现(吐血推荐)
2008/10/04 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
php无序树实现方法
2015/07/28 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
Openlayers绘制地图标注
2020/09/28 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
python开发游戏的前期准备
2019/05/05 Python
python super用法及原理详解
2020/01/20 Python
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
财务会计专业个人求职信范本
2014/01/08 职场文书
大学毕业感言100字
2014/02/03 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
单位婚育证明范本
2014/11/21 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS