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


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 11 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
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中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
Django实现学生管理系统
2019/02/26 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
python开发前景如何
2020/06/11 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
外科实习自我鉴定
2013/10/06 职场文书
化学专业毕业生自荐信
2013/11/15 职场文书
2013年员工自我评价范文
2013/12/27 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
浅谈Redis的事件驱动模型
2022/05/30 Redis