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


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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 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连接SQLServer2005 的问题解决方法
2010/07/19 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Python的语言类型(详解)
2017/06/24 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
Django添加feeds功能的示例
2018/08/07 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python系列 文件操作的代码
2019/10/06 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
中国电视购物:快乐购
2017/02/04 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
二年级数学教学反思
2014/01/21 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
关于环保的广播稿
2015/12/17 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
Python3中最常用的5种线程锁实例总结
2021/07/07 Python
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL