深入理解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帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 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 页面编码声明方法详解(header或meta)
2010/03/12 PHP
php通过字符串调用函数示例
2014/03/02 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
TensorFlow神经网络优化策略学习
2018/03/09 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
Bootstrap 学习分享
2012/11/12 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
学习标兵获奖感言
2014/02/20 职场文书
超市开店计划书
2014/09/15 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
小学老师对学生的评语
2014/12/29 职场文书
评职称个人总结
2015/03/05 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书