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 相关文章推荐
js+xml生成级联下拉框代码
Jul 24 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
php实现求相对时间函数
2015/06/15 PHP
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
python通过线程实现定时器timer的方法
2015/03/16 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
python文件操作的简单方法总结
2019/11/07 Python
如何基于python生成list的所有的子集
2019/11/11 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
在Python中实现字典反转案例
2020/12/05 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
校园安全教育广播稿
2014/02/17 职场文书
作风转变心得体会
2014/09/02 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
golang 语言中错误处理机制
2021/08/30 Golang