一、在看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. Balanced Sequence（毒瘤啊）排序贪心 HDU多校

    Problem Description Chiaki has n strings s1,s2,…,sn consisting of '(' and ')'. A string of this type ...

  2. JavaScript的性能优化：加载和执行

    随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 ...

  3. Win7 64位系统下 Retional rose 2003 安装及破解

    网上关于Retional rose 2003安装和破解的文章比较多,这里,我结合自己的亲身体验,和大家分享一下win7 旗舰版 64位系统下Retional rose 2003(下面简称rose200 ...

  4. UVA 1648 Business Center

    https://vjudge.net/problem/UVA-1648 设上升x层,列个方程解出来,再把x带回去 #include<cmath> #include<cstdio> ...

  5. Spring mvc 增加静态资源配置后访问不了注解配置的controller

    spring mvc 增加静态资源访问配置. 例如: <!-- 静态资源映射 --> <mvc:resources location="/static/" map ...

  6. jenkins slave agent 当作服务运行

    1. 接上边编辑好文件 2. 双击以上的jnlp文件 3. 点击弹出的窗口File->save as service, 此时如果报错的话很可能是由于没有安装.net(.net2 以上) 4. 保 ...

  7. 【BZOJ4837】LRU算法 [模拟]

    LRU算法 Time Limit: 6 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description 小Q同学在学习操作系统中内存管理的 ...

  8. bzoj3172 Ac自动机

    根据fail树的性质 我们在建树的时候每建一个串就将他路径上的点全部加1表示这个串的后缀又出现了一次 然后从下到上把sum加起来就可以得到答案了 #include<cstdio> #inc ...

  9. 【51NOD-0】1046 A^B Mod C

    [算法]快速幂运算 [题解]快速幂的原理是把幂用二进制表示,从最低位a,次低位a2,次次低位(a2)2. #include<cstdio> long long quick_pow(long ...

  10. js localtion.href 数据传输

    1.今天发现的一种数据发送 如下标红 <script> <%--测试juquery的代码如下操作.我们可以看出使用juquery 进行选择标签的属性可以更加方便--%> con ...