深入理解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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
js tab效果的实现代码
Dec 26 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
js实现常见的工具条效果
Mar 02 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 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设计聊天室步步通
2006/10/09 PHP
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
介绍php设计模式中的工厂模式
2008/06/12 PHP
php实现快速排序法函数代码
2012/08/27 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python获取服务器信息的最简单实现方法
2015/03/05 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
python爬取代理ip的示例
2020/12/18 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
销售口号大全
2014/06/11 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
大学生求职自荐信
2015/03/24 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang