一、在看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. BIRT-商务智能报表工具开发案例指南

    BIRT 报表 脚本 开发 数据库 http://www.iteye.com/topic/1128694 打算近期出版一本全面介绍BIRT使用的书籍,能够帮助大家全面了解BIRT的方方面面,用丰富的案 ...

  2. 【BZOJ】2679: [Usaco2012 Open]Balanced Cow Subsets

    [算法]折半搜索+数学计数 [题意]给定n个数(n<=20),定义一种方案为选择若干个数,这些数可以分成两个和相等的集合(不同划分方式算一种),求方案数(数字不同即方案不同). [题解] 考虑直 ...

  3. 【BZOJ】1385 [Baltic2000]Division expression

    [算法]欧几里德算法 [题解]紫书原题 #include<cstdio> #include<algorithm> using namespace std; ; int T,t, ...

  4. charles https抓包

    1. 配置 Charles 根证书 首先打开 Charles: Charles 启动界面 主界面 然后如下图操作:   之后会弹出钥匙串,如果不弹出,请自行打开钥匙串,如下图: 钥匙串 系统默认是不信 ...

  5. Html5_sessionStrong和localStorage的灵活使用

    谈谈这两个属性sessionStrong和localStorage是Html5新增点属性,用来记录一些数据在浏览器. 两者的区别sessionStrong存储的数据是暂时的,浏览器关掉后,存储下来的数 ...

  6. 将已编写的静态的网页发布到github上

    最近在学习前端框架的过程中,一直想把自己学习中做的demo 发布到github 上去.但是在查看了很多相关资料也没能找到一个比较满意的结果. 无奈之下,只能尝试做用了一种自认为最low 的方式来达到部 ...

  7. spring cloud ribbon 断路器

    @EnableDiscoveryClient @SpringBootApplication @EnableCircuitBreaker //开启断路器 public class ConsumerMov ...

  8. Python第三方库matplotlib（2D绘图库）入门与进阶

    Matplotlib 一 简介: 二 相关文档: 三 入门与进阶案例 1- 简单图形绘制 2- figure的简单使用 3- 设置坐标轴 4- 设置legend图例 5- 添加注解和绘制点以及在图形上 ...

  9. Fiddler抓取HTTPS协议

    HTTPS协议握手过程: 1,客户端明文请求,把自己支持的非对称加密算法(用于使用CA证书公钥加密计算生成协商密钥的随机数per_master).对称加密算法(用于以后使用协商密钥加密传输内容).验证 ...

  10. 数据结构--Avl树的创建，插入的递归版本和非递归版本，删除等操作

    AVL树本质上还是一棵二叉搜索树,它的特点是: 1.本身首先是一棵二叉搜索树.   2.带有平衡条件:每个结点的左右子树的高度之差的绝对值最多为1(空树的高度为-1).   也就是说,AVL树,本质上 ...