jquery鍵盤常見事件

時間 2019-11-17

原文原文鏈接

1、在看jquery的時候有幾個常見的鍵盤事件，我寫在這裏：javascript

一、keydown()
keydown事件會在鍵盤按下時觸發.
二、keyup()
keyup事件會在按鍵釋放時觸發,也就是你按下鍵盤起來後的事件
三、keypress()
keypress事件會在敲擊按鍵時觸發,咱們能夠理解爲按下並擡起同一個按鍵 css

2、鍵盤對應的ASCII碼：html

常見的例如上下左右鍵，分別爲38,40,37,39。也就是從左鍵開始順時針旋轉。java

也能夠利用下面這段代碼去獲取jquery

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

上面例子中,event.keyCode就能夠幫助咱們獲取到咱們按下了鍵盤上的什麼按鍵,返回的是ascII碼瀏覽器

3、示例測試

<!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>

4、兼容性ui

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，值爲 undefinedspa

測試代碼：調試

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。