js键盘上下左右键怎么触发function(实例讲解)


Posted in Javascript onDecember 14, 2013
<script type="text/javascript">
 function jumpPage() { 
    if (event.keyCode==37)//左 
fun_a(); 
if (event.keyCode==38)//上
 fun_b();
 if (event.keyCode==39)//右 
fun_c(); 
if (event.keyCode==40)//下 
fun_d();
 } 

 
function fun_a(){ 
window.alert('你按下了左')
 } 
function fun_b(){ 
window.alert('你按下了上')
} 
function fun_c(){ 
window.alert('你按下了右') 
} 
function fun_d(){
 window.alert('你按下了下') 
} 
document.onkeydown=jumpPage;
</script>

HTML code
<table width="100%" border="1" cellspacing="1" cellpadding="0" id=table> <tr id="lineone" style="background-color:#00cccc;"> <td id=aa height="23"> </td> <td id=aa >按向下键</td> <td id=cc >按向下键</td> <td id=dd >按向下键</td> <td id=ee >按向下键</td> </tr> <tr id="linetwo" tyle="background-color:#ffffff;"> <td id=a height="23"> </td> <td id=b >按向上键</td> <td id=c >按向上键</td> <td id=d >按向上键</td> <td id=e >按向上键</td> </tr></table><script language="javascript"> function keyDown(e) { var iekey=event.keyCode; action(iekey); } document.onkeydown = keyDown; function action(iekey) { if(iekey==40) { lineone.style.backgroundColor = ""; linetwo.style.backgroundColor = "#00cccc"; } if(iekey==38) { lineone.style.backgroundColor = "#00cccc"; linetwo.style.backgroundColor = ""; } } </script><input name="id" type="hidden" id="id" value
Javascript 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
微信小程序实现底部导航
Nov 05 Javascript
JavaScript前端面试组合函数
Jun 21 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 #Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 #Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 #Javascript
代码触发js事件(click、change)示例应用
Dec 13 #Javascript
jquery获得option的值和对option进行操作
Dec 13 #Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 #Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 #Javascript
You might like
php下实现农历日历的代码
2007/03/07 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
vue filters的使用详解
2018/06/11 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
python制作花瓣网美女图片爬虫
2015/10/28 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
python实现银行管理系统
2019/10/25 Python
pytorch 求网络模型参数实例
2019/12/30 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
理工科学生的自我评价
2013/12/15 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
生活小常识广播稿
2015/08/19 职场文书
2016年重阳节慰问信
2015/12/01 职场文书