深入理解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 相关文章推荐
基于jquery的超简单上下翻
Apr 20 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
Node.js模块加载详解
Aug 16 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 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 Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
php页面缓存方法小结
2015/01/10 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
bpython 功能强大的Python shell
2016/02/16 Python
分享python数据统计的一些小技巧
2016/07/21 Python
Python检测网络延迟的代码
2018/05/15 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
Python socket模块方法实现详解
2019/11/05 Python
python搜索算法原理及实例讲解
2020/11/18 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
工程监理应届生求职信
2013/11/09 职场文书
运动会领导邀请函
2014/01/10 职场文书
读书活动总结范文
2014/04/26 职场文书
健康证明
2015/06/19 职场文书
毕业赠语大全
2015/06/23 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL