jquery键盘常见事件

浏览数：19 / 时间：2015年06月09日

一、在看jquery的时候有几个常见的键盘事件，我写在这里：

1、keydown()
keydown事件会在键盘按下时触发.
2、keyup()
keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件
3、keypress()
keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键

二、键盘对应的ASCII码：

常见的例如上下左右键，分别为38,40,37,39。也就是从左键开始顺时针旋转。

也可以利用下面这段代码去获取

$(document).keydown(function(event){
console.log(event.keyCode);//FF下调试
});

上面例子中,event.keyCode就可以帮助我们获取到我们按下了键盘上的什么按键,返回的是ascII码

三、示例

<!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" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>键盘</title>
    <style>
        *{margin: 0;padding: 0;font: 12px Arial}
        #msg{position: absolute;left: 100px;top: 100px}
        .msg_caption span{font: 12px Arial;color: #fff;background: #647D65;width: 45px;display: block;float: left;margin: 0 2px;padding: 7px 0;text-align: center;cursor: pointer;}
        .clearfloat:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; }
        .clearfloat {  zoom: 1; /* triggers hasLayout */ display: inline-block; /* resets display for IE/Win */}
        div textarea{padding: 3px; width: 200px;height: 150px;overflow: auto;border: 1px solid #000}

    </style>
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var $comment=$(‘#comment‘);
                $(document).keydown(function(event){ 
                    if (event.keyCode == 37&&(!$comment.is(":animated"))) {
                        $comment.animate({scrollTop:"-=50" }, 400)
                    };
                    if (event.keyCode == 39&&!$comment.is(":animated")) {
                        $comment.animate({scrollTop:‘+=‘+50+‘px‘}, 400)
                    }
                });
        });
    </script>
</head>
<body>
    <div id="msg" >
        <div class="msg_caption clearfloat">
            <span class="bigger">向上</span>
            <span class="smaller clearfloat">向下</span>
        </div>

        <div>
            <textarea name="comment" id="comment">多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动多行文本框滚动条滚动</textarea>
        </div>
    </div>
</body>
</html>

四、兼容性

e = event || window.event;//获取事件，这样写是为了兼容ie浏览器
currKey = e.keyCode || e.which || e.charCode;//获取按键，也是为了兼容浏览器
||表示，如果前面的成立就等于前面的，反之则后面的

在IE下：
>> 支持keyCode
>> 不支持which和charCode,二者值为 undefined
在Firefox下：
>> 支持keyCode，除功能键外，其他键值始终为 0
>> 支持which和charCode，二者的值相同
在Opera下：
>> 支持keyCode和which，二者的值相同
>> 不支持charCode，值为 undefined

测试代码：

<script type="text/javascript">
    //By 枫岩@CnLei.Com
    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‘];
      $("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>注：在FF下,keyCode始终为0</strong><br />
    which:<span id="which"></span> <strong>注：在IE下,which始终为undefined ； 在Opera下，keyCode和charCode二者的值相同</strong><br />
    charCode:<span id="charCode"></span> <strong>注：在IE、Opera下,charCode始终为undefined ; 在FF下，which和charCode二者的值相同</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>