JavaScript键盘事件处理：跨浏览器兼容与对象移动实现

JavaScript键盘事件处理：跨浏览器兼容与对象移动实现

处理Enter键焦点切换问题：

 
<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复杂，需添加特定语句以持续监听击键，否则易与鼠标事件混淆。该语句为：

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”时对象开始移动，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 变量

引入"Active"变量

前述程序存在缺陷：对象移动后无法停止，且多次按键会导致运动加速。现对此进行修正。

使用变量"active"优化此情况，插入if语句检查函数是否重复执行。

 
function slide() {
if (myobj.active) {
myobj.xpos += 5
myojb.left = myobj.xpos
setTimeout("slide()",30)
　　} 
} 

此时，仅当myobj.active为真时slide()函数才执行；若为假，对象停止移动。

使用 onKeyUp 和 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) { // 若按下"A"键
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 // 若释放"A"键
　　} 
} 
function slide() {
if (block.active) {
block.xpos += 5
block.left = block.xpos
status = block.xpos // 非必需，仅用于显示
setTimeout("slide()",30)
　　　} 
}