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


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 相关文章推荐
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
javascript实现计算器功能详解流程
Nov 01 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
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
php简单smarty入门程序实例
2015/06/11 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
数据库连接池的工作原理
2012/09/26 面试题
销售经理竞聘书
2014/03/31 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
python实现会员管理系统
2022/03/18 Python
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python
Go获取两个时区的时间差
2022/04/20 Golang