码迷,mamicode.com
首页 > 其他好文 > 详细

事件——键盘事件中keyCode、which和charCode 的兼容性

时间:2014-08-13 01:07:14      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   io   strong   ar   

 

  keyCode: IE、Chrome支持,在FF下,keyCode返回非字符按键的Unicode,如果是字符按键返回始终为0。

      which:   FF,Chrome支持;在IE下,which和charCode始终为undefined ,jquery方式下和keyCode值相同。

charCode:   Chrome支持,在FF下,非字符键返回0,如果是字符按键返回Unicode

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

    function $(s){
        return document.getElementById(s)?document.getElementById(s):s;
    }
    function viewKeyInfo(e){
        var currKey=0,CapsLock=0;
        var e=e||event;
        currKey=e.keyCode||e.which||e.charCode;
        CapsLock=currKey >=65 && currKey <=90;
        $("type").innerHTML=e[type];
        $("currKey").innerHTML=String.fromCharCode(currKey);
        $("Decimal").innerHTML=currKey;
        $("keyCode").innerHTML=e[keyCode];
        $("charCode").innerHTML=e[charCode];
        $("caps").innerHTML=CapsLock;
        $("shiftKey").innerHTML=e[shiftKey];
        $("altKey").innerHTML=e[altKey];
        $("ctrlKey").innerHTML=e[ctrlKey];
        $("repeat").innerHTML=e[repeat];
        $("which").innerHTML=e[which];
    }
    document.onkeypress= viewKeyInfo;
</script>
<p>请按下任意键看测试效果:</p>
type:<span id="type"></span><br />
当前Key:<span id="currKey"></span><br />
Decimal:<span id="Decimal"></span><br />
keyCode:<span id="keyCode"></span> <strong>注:IE、Chrome支持,在FF下,keyCode返回非字符按键的Unicode,如果是字符按键返回始终为0</strong><br />
which:<span id="which"></span> <strong>注:FF,Chrome支持;在IE下,which和charCode始终为undefined ,jquery方式下和keyCode值相同。</strong><br />
charCode:<span id="charCode"></span> <strong>注:Chrome支持,在FF下,非字符键返回0,如果是字符按键返回Unicode</strong><br />
大写:<span id="caps"></span><br />
altKey:<span id="altKey"></span><br />
ctrlKey:<span id="ctrlKey"></span><br />
shiftKey:<span id="shiftKey"></span><br />
repeat:<span id="repeat"></span><br />
<style type="text/css" media="all">
    body {color:#999;font:normal 14px tahoma,宋体,Geneva,Arial,sans-serif;}
    span {color:#f00;font-weight:bold;padding:0 5px;}
    strong {color:#090;font-weight:normal;padding:0 5px;}
</style>

</body>
</html>

 

事件——键盘事件中keyCode、which和charCode 的兼容性,布布扣,bubuko.com

事件——键盘事件中keyCode、which和charCode 的兼容性

标签:style   blog   http   color   java   io   strong   ar   

原文地址:http://www.cnblogs.com/xjinza/p/3909030.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!