当前位置:  编程技术>WEB前端

深入理解JQuery keyUp和keyDown的区别

    来源: 互联网  发布时间:2014-08-25

    本文导语:  定义和用法完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。 当按钮被按下时,发生 keydown 事件。 keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。 代码如下:$(document).ready(function(){  $("i...

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

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

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

代码如下:





$(document).ready(function(){
  $("input").keydown(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").keyup(function(){
    $("input").css("background-color","#D6D6FF");
  });
});



Enter your name:

当发生 keydown 和 keyup 事件时,输入域会改变颜色。请试着在其中输入内容。





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

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

代码如下:



    无标题页

   

   
        $(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());
            });
        });    
   



   
   


   

   
   

   

   
   

   




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

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

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

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

获取键盘点击的键位:

代码如下:





$(document).ready(function(){
  $("input").keydown(function(event){
    $("div").html("Key: " + event.which);
  });
});


请随意键入一些字符:

当您在上面的框中键入文本时,下面的 div 会显示键位序号。






    
 
 

您可能感兴趣的文章:

  • 深入理解linux内核
  • 技术文章 iis7站长之家
  • 深入理解PHP内核 TIPI
  • 100分求:哪儿有《深入理解linux内核》可供下哉!
  • 哪儿有下载《深入理解Linux内核》这本书?(中文)
  • 有人读完《深入理解linux内核》吗?
  • 求一起看《深入理解linux内核》
  • 深入理解Java对象实例生成的例子
  • 深入理解计算机系统一书的一个问题
  • java父类和子类初始化顺序的深入理解
  • 深入Ref,Out的理解及其使用
  • 深入理解Oracle数据库的启动和关闭
  • 《现代操作系统》和《深入理解计算机系统》
  • CS:APP深入理解计算机系统练习题-【ELF文件的符号表相关】
  • 深入理解结构体中占位符的用法
  • 求支持,深入理解LINUX内核
  • 深入理解Activity之间的数据传递
  • 深入理解linux内核第三版中文版 不够可以再加分
  • C# 多态性的深入理解
  • 基于Java Tomcat和激活MyEclips的深入理解
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • Docker支持更深入的容器日志分析
  • 关于《深入浅出MFC》
  • Linux有没有什么好的高级的书,我要深入,
  • [100分]有没有关于binutils的深入的资料?或者深入底层的资料?
  • 想深入学习Java应该学习哪些东西
  • 哪位有《JSP深入编程》电子版?
  • 想要深入学习LINUX该学什么?
  • 如何深入Linux的内核学习?
  • U-BOOT得掌握到什么程序,用不用深入去学
  • 想深入了解操作系统该怎么做
  • 前一阵子学习了shell脚本,如果想深入点了解linux可以看什么书呢
  • 深入多线程之:深入分析Interlocked
  • ##想买书深入学习linux下的编程,请指教
  • 深入JDBC sqlserver连接写法的详解
  • 深入oracle特定信息排序的分析
  • 深入分析C中不安全的sprintf与strcpy
  • 请问JFC是否有必要深入研究?
  • 如何深入了解某个平台系统的底层
  • 各位,帮忙推荐几本深入学习Linux的书!!!
  • 想深入学习linux,请推荐一个版本的LINUX系统
  • 如何深入了解线程


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3