javascript的键盘控制事件说明


Posted in Javascript onApril 15, 2008

控制回车焦点问题:

<script type="text/javascript"> 
function submitForm() { 
if(window.event.keyCode==13) { 
document.getElementById('btnSearch').focus(); 
} 
} 
document.onkeydown=submitForm; 
</script>

首先需要了解的是如何初始化该事件,基本语句如下:

document.onkeydown = keyDown

当浏览器读到这个语句时,无论按下键盘上的哪个键,都将呼叫KeyDown()函数。

捕获键盘事件对于不同的浏览器来说有点困难,我们分别的来学习不同浏览器的实现语句。

Netscape

Netscape的程序实现要比IE麻烦,你必须放一个特别的语句,来使Netscape始终去检查击键事件,如果没有这行语句,击键事件将与按下鼠标事件搞混。特别语句如下:

document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)

keyDown()函数有一个隐藏的变量--一般的,我们使用字母“e”来表示这个函数。

function keyDown(e)

变量e表示发生击键事件,寻找是哪个键被按下,使用以下属性:

e.which

这将给出该键的索引值,把索引值转化成该键的字母或数字值,写:

String.fromCharCode(e.which)

把上面的语句放在一起,我们可以知道被按下的是哪一个键:

function keyDown(e) { 

var keycode = e.which 

var realkey = String.fromCharCode(e.which) 

alert("keycode: " + keycode + " realkey: " + realkey) 
} 

 document.onkeydown = keyDown 
document.captureEvents(Event.KEYDOWN)

Internet Explorer

IE的程序与Netscape类似,但它不需要e变量,用window.event.keyCode来代替e.which,把键的索引值转化为真实键值方法类似:String.fromCharCode(event.keyCode),程序如下:

function keyDown() { 

 var keycode = event.keyCode 

 var realkey = String.fromCharCode(event.keyCode) 

 alert("keycode: " + keycode + " realkey: " + realkey) 
} 
document.onkeydown = keyDown 
document.onkeydown = keyDown

适用于两者的程序

用两种浏览器检查上述实例,你会发现执行结果不总是一样的,这是因为两种浏览器的键盘代码设置不相同,因此你必须使用单独的代码分别来写这段程序,而毫无别法。

建议你要完全忘掉实际的键值,仅仅使用键盘的代码值来工作。下面这段程序将视情况而设置,如果是用IE的话,ieKey生效,把nKey设为0,如果是用Netscape的话,nKey生效,把nKey设为0,然后用一个警示框来显示两者的值:

function keyDown(e) { 

if (ns4) { 

 var nKey=e.which; 

 var ieKey=0 

} 

if (ie4) { 

 var ieKey=event.keyCode; 

 var nKey=0 

} 

alert("nKey:"+nKey+" ieKey:" + ieKey) 
} 
document.onkeydown = keyDown 
if (ns4) document.captureEvents(Event.KEYDOWN)

使用键盘移动对象

下面的程序实现用键盘移动对象,程序将检查哪一个键被按下,从而调用相应的函数来移动对象。本例中,当字母“A”被按下时,对象就开始移动,字母“A”键在nKey中的值是97,ieKey的值为65,在程序中将分别检查这两个值。

function init() { 

if (ns4) block = document.blockDiv 

if (ie4) block = blockDiv.style 

block.xpos = parseInt(block.left) 

document.onkeydown = keyDown 

if (ns4) document.captureEvents(Event.KEYDOWN) 
} 
function keyDown(e) { 

if (ns4) { var nKey=e.which; var ieKey=0 } 

if (ie4) { var ieKey=event.keyCode; var nKey=0 } 

if (nKey==97 || ieKey==65) { // 如果"A"键按下 


slide() 

} 
} 
function slide() { 

block.xpos += 5 

block.left = block.xpos 

status = block.xpos // 这一句不一定需要,只是为了检查状态 

setTimeout("slide()",30) 
}

增加 "Active"变量

上面程序稍微有些不足,对象移动以后就无法使它停止了,而且当你多按几次A键时,物体将运动得越来越快,这里我们来修补它。

使用变量"active"来改变这种情况,插入if语句来检查函数是否重复。

function slide() { 

if (myobj.active) { 

myobj.xpos += 5 

myojb.left = myobj.xpos 

setTimeout("slide()",30) 

} 
}

在这种情况中,slide()函数只有在myobj.active值为真的时候才会工作,当myobj.active值为假时,对象将停止移动。

使用 onKeyUp 和 "Active" 变量

onkeyup事件和onkeydown事件工作原理相同,用以下语句初始化该事件:

document.onkeydown = keyDown 
document.onkeyup = keyUp 
if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)

keyUp() 函数与之相同,当一个键被放开时事件被激发,对象停止移动,并将active变量置为0:

function keyUp(e) { 

if (ns4) var nKey = e.which 

if (ie4) var ieKey = window.event.keyCode 

if (nKey==97 || ieKey==65) 

block.active = false 
}

下面是比较完整的程序:

function init() { 

if (ns4) block = document.blockDiv 

if (ie4) block = blockDiv.style 

block.xpos = parseInt(block.left) 

block.active = false 

document.onkeydown = keyDown 

document.onkeyup = keyUp 

if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP) 
} 
function keyDown(e) { 

if (ns4) {var nKey=e.which; var ieKey=0} 

if (ie4) {var ieKey=event.keyCode; var nKey=0} 

if ((nKey==97 || ieKey==65) && !block.active) { // if "A" key is pressed 


block.active = true slide() 

} 
} 
function keyUp(e) { 

if (ns4) {var nKey=e.which; var ieKey=0} 

if (ie4) {var ieKey=event.keyCode; var nKey=0} 

if (nKey==97 || ieKey==65) { 

block.active = false // if "A" key is released 

} 
} 
function slide() { 

 if (block.active) { 


block.xpos += 5 


block.left = block.xpos 


status = block.xpos // not needed, just for show 


setTimeout("slide()",30) 

 } 
}
Javascript 相关文章推荐
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
关于document.cookie的使用javascript
Apr 11 #Javascript
javascript比较文档位置
Apr 08 #Javascript
js函数般调用正则
Apr 08 #Javascript
javascript背投广告代码的完善
Apr 08 #Javascript
大家未必知道的Js技巧收藏
Apr 07 #Javascript
用JavaScript调用WebService的示例
Apr 07 #Javascript
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 #Javascript
You might like
理解PHP5中static和const关键字的区别
2007/03/19 PHP
php 获取本机外网/公网IP的代码
2010/05/09 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
浅谈React高阶组件
2018/03/28 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
python删除文本中行数标签的方法
2018/05/31 Python
Flask之请求钩子的实现
2018/12/23 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
python——全排列数的生成方式
2020/02/26 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
加强作风建设工作总结
2014/10/23 职场文书
如何Python使用re模块实现okenizer
2022/04/30 Python