一、在看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. bzoj 1568 [JSOI2008]Blue Mary开公司 超哥线段树

    [JSOI2008]Blue Mary开公司 Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 1808  Solved: 639[Submit][Sta ...

  2. 解决Sublime Install Package的There are no packages available for install问题(channel_v3.json)

    Sublime版本 Sublime Text 3.1.1 Build 3176 自己也尝试了很多次,所以这一解决办法仅是可能解决你的问题 一.解决简要描述 造成的原因大致是 无法通过request去获 ...

  3. Flash Sort

    FlashSort依然类似桶排,主要改进了对要使用的桶的预测,或者说,减少了无用桶的数量从而节省了空间,例如 待排数字[ 6 2 4 1 5 9 100 ]桶排需要100个桶,而flash sort则 ...

  4. Linux下设置mysql和tomcat开机启动

    本文基于CentOS 64位     一.mysql设置开机启动 1.cp /usr/local/mysql/support-files/mysql.server /etc/init.d/mysql ...

  5. linux命令查看服务器的型号、序列号、内存插槽数（转）

    1,查看服务器型号.序列号: dmidecode|grep "System Information" -A9|egrep  "Manufacturer|Product|S ...

  6. 【BZOJ1879】【SDOI2009】Bill的挑战 [状压DP]

    Bill的挑战 Time Limit: 4 Sec  Memory Limit: 64 MB[Submit][Status][Discuss] Description Input 第一行:一个整数T, ...

  7. 「6月雅礼集训 2017 Day4」寻找天哥

    [题目大意] 给出$n$个三维向量,设当前向量长度为$L$,每次沿着向量等概率走$[0,L]$个长度.一个球每秒半径增加1个长度,直到覆盖位置,每秒耗能为球体积,求总耗能的期望. 设最后半径为R,那么 ...

  8. 【CF1009F】 Dominant Indices （长链剖分+DP）

    题目链接 \(O(n^2)\)的\(DP\)很容易想,\(f[u][i]\)表示在\(u\)的子树中距离\(u\)为\(i\)的点的个数,则\(f[u][i]=\sum f[v][i-1]\) 长链剖 ...

  9. mac系统用docker安装oracle数据库

    oracle没有mac可用的版本,最好的办法是通过docker安装 一.下载docker 1.通过brew下载 brew cask install docker 2.手动下载(需要vpn) https ...

  10. 项目记录 -- zpool set

    zfs set <property=value> <filesystem|volume|snapshot> root@UA4300D-spa:~/hanhuakai/pro_0 ...