js

最新推荐文章于 2024-04-14 07:02:43 发布

web256

最新推荐文章于 2024-04-14 07:02:43 发布

阅读量268

点赞数

分类专栏：杂谈文章标签： event.keyCode event.which

杂谈专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在写Felix的javascript运行环境的时候
为了方便使用，Felix希望能够捕捉到CTRL+Enter按键作为运行的快捷键
以前写过for IE的代码，非常简单:<script language="javascript">
function myKeyPress(){
alert(event.keyCode);
}
</script>
<body οnkeypress="myKeyPress()">
......
但是这样的代码在Firefox下根本不能运行，因为event不是Firefox的一个全局对象。
查了好多资料，终于明白了在Firefox下要这样写代码才行：<script language="javascript">
function myKeyPress(evt){
alert(evt.which);
}
</script>
<body οnkeypress="myKeyPress(evt)">
......
但是很遗憾，这样的代码在IE下又不能运行——好吧，采取折衷方案如下：

function myKeyPress(evt){
     evt = (evt) ? evt : ((window.event) ? window.event : "") //兼容IE和Firefox获得keyBoardEvent对象
    var key = evt.keyCode?evt.keyCode:evt.which; //兼容IE和Firefox获得keyBoardEvent对象的键值
    if(evt.ctrlKey && (key == 13 || key == 10)){ //同时按下了Ctrl和回车键
         //do something;
     }
}

<body οnkeypress="myKeyPress(evt)">
......

于是代码终于可以在IE和Firefox运行了。

总结一下需要注意的地方：
1. 取得keyBoardEvent对象
2. 取得keyBoardEvent对象的键值
3. οnkeypress="myKeyPress(event)" 函数需要一个参数

以上很大一部分是参考了来自以下网页：
Javascript Madness
该网页详细介绍了几个很容易令人发疯的兼容性问题。。。。

下面放出完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title> new document </title>
   <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
   <meta name="generator" content="editplus" />
   <meta name="author" content="" />
   <meta name="keywords" content="" />
   <meta name="description" content="" />
   <script language="javascript">
   function myKeyPress(evt){
     evt = (evt) ? evt : ((window.event) ? window.event : "") //兼容IE和Firefox获得keyBoardEvent对象
     var key = evt.keyCode?evt.keyCode:evt.which; //兼容IE和Firefox获得keyBoardEvent对象的键值
     if(evt.ctrlKey && (key == 13 || key == 10)){
       alert("send");//同时按下了Ctrl和回车键
      
     }
   }
</script>
</head>


<body οnkeypress="myKeyPress(event)"> 
</body>
</html>