深入理解JQuery keyUp和keyDown的区别


Posted in Javascript onDecember 12, 2013

定义和用法
完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。

当按钮被按下时,发生 keydown 事件。

keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").keydown(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").keyup(function(){
    $("input").css("background-color","#D6D6FF");
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>当发生 keydown 和 keyup 事件时,输入域会改变颜色。请试着在其中输入内容。</p>
</body>
</html>

众所周知,jquery封装了很多事件交互方法,这里讲到的问题在原生js中也是有的。

keyup是在用户将按键抬起的时候才会触发的,属于整个按键过程中的最后阶段,所以有其特定的用处,就是在左侧输入,右侧同步显示的过程中很有用处。典型的例子就是邮件编辑预览的应用。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('#t1').live('keyup', function() {
                $('#v1').text($(this).val());
            });
            $('#t2').live('keydown', function() {
                $('#v2').text($(this).val());
            });
            $('#t3').live('keypress', function() {
                $('#v3').text($(this).val());
            });
        });    
    </script>
</head>
<body>
    <textarea id="t1"></textarea>
    <div id="v1">
    </div>
    <textarea id="t2"></textarea>
    <div id="v2">
    </div>
    <textarea id="t3"></textarea>
    <div id="v3">
    </div>
</body>
</html>

这里分别应用了三种事件,其中t1能够完整的同步到v1中,而keypress和keydown总是少最后一个字符,这样就说明了这三种事件触发的小小区别,keydown是在按下时触发,不能得到最后的输入结果,keypress也是一样。

例如:keydown绑定文本框,每次点击触发事件,在获取文本框的值,总是打印上次操作时文本框的内容,

这是因为keydown操作后,事件触发了,但值还未显示在文本框中,所以这类操作要用keyup 一个完整的按键动作后,才可以获取文本框的值。

keydown与keypress更适用于通过键盘控制页面类功能的实现。

获取键盘点击的键位:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").keydown(function(event){ 
    $("div").html("Key: " + event.which);
  });
});
</script>
</head>
<body>
请随意键入一些字符:<input type="text" />
<p>当您在上面的框中键入文本时,下面的 div 会显示键位序号。</p>
<div />
</body>
</html>
Javascript 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 #Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 #Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 #Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 #Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 #Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 #Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 #Javascript
You might like
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
Node.js文件操作详解
2014/08/16 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
js运动事件函数详解
2016/10/21 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python装饰器使用方法实例
2013/11/21 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
建筑人员岗位职责
2013/12/25 职场文书
八一建军节活动方案
2014/02/10 职场文书
小学生植树节活动总结
2014/07/04 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
技术股份合作协议书
2014/10/05 职场文书
社区服务活动报告
2015/02/05 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
听课评课活动心得体会
2016/01/15 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers