一、在看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>

jquery键盘常见事件的更多相关文章

  1. jquery api 常见 事件操作

    change.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html ...

  2. jquery 键盘回车事件

    <input id="search" placeholder="输入要领用的资产条码" id="scanCode" type=&quo ...

  3. jQuery键盘敲击事件，换键的话换键码就可以

    $("body").keyup(function () { if (event.which == 13){ $("#Btn_login").trigger(&q ...

  4. jquery键盘事件全记录

    很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...

  5. js进阶 12-4 jquery键盘事件如何使用

    js进阶 12-4 jquery键盘事件如何使用 一.总结 一句话总结:键盘和鼠标都是外设输入设备,所以函数很像,所以使用就像鼠标事件click一样 1.jquery键盘事件有哪三个? 1(up和do ...

  6. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  7. DOM笔记（五）：JavaScript的常见事件和Ajax小结

    一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...

  8. Jquery基础之事件操作

    事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事 ...

  9. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

随机推荐

  1. [转载][mysql]mysql字符集干货

    源地址:http://www.blogjava.net/zyskm/archive/2013/04/09/361888.html 字符集的概念大家都清楚,校对规则很多人不了解,一般数据库开发中也用不到 ...

  2. 如何在阿里云服务器部署Django

    这段时间一直在搞我的网站——大学易,一个大学生评课网站,主要是提供课程的详尽信息(比如老师会不会经常点名,有没有期中考试),课程资料的下载等等. 这篇文章主要是分享给那些菜鸟,就是像我一样完全没有搞过 ...

  3. UVA 1262 Password

    https://vjudge.net/problem/UVA-1262 字典序第k小 注意两点: 1. k-- 2.去重 #include<cstring> #include<cst ...

  4. 2017 济南综合班 Day 3

    T1  黑化 题意: 求一个字符串是否可能包含另一个字符串 字符串中的?可以匹配任意字母 可能输出 God bless You! 一定不可能 输出 Game Over! 计算fail数组时,fail数 ...

  5. 在此位置打开CMD

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\folder\shell\cmd]@="在此位置打开CMD"[HKE ...

  6. 【BZOJ4903】【CTSC2017】吉夫特 [DP]

    吉夫特 Time Limit: 15 Sec  Memory Limit: 512 MB[Submit][Status][Discuss] Description Input 第一行一个整数n. 接下 ...

  7. 「6月雅礼集训 2017 Day7」三明治

    [题目大意] $1 \leq n,m \leq 400$ N字形表示:上图第1行第1个那种:Z字形表示上图第1行第2个那种. [题解] 很容易得到结论: 考虑如果紫色比绿色先消去,那么黄色一定会比对应 ...

  8. 51nod1245 Binomial Coefficients Revenge

    题目来源: HackerRank 基准时间限制:2 秒 空间限制:131072 KB 分值: 640  C(M,N) = M! / N! / (M - N)! (组合数).给出M和质数p,求C(M,0 ...

  9. 2009 Round2 A Crazy Rows （模拟）

    Problem You are given an N x N matrix with 0 and 1 values. You can swap any two adjacent rows of the ...

  10. .net XmlHelper xml帮助类

    using System.Data; using System.IO; using System.Xml; using System.Xml.Serialization; /// <summar ...