您好,欢迎访问一九零五行业门户网

键盘控制事件应用教程大全_基础知识

获取键盘控制事件是实现交互性最有力的方法之一。
首先需要了解的是如何初始化该事件,基本语句如下:
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) 
 } 
}
其它类似信息

推荐信息