一个菜鸟的互联网技术分享博客
您的位置: 主页 > jQuery之keyup方法
advertisement

jQuery之keyup方法

在工作中遇到一个问题就是,输入框里面的值变化,下面的充值数值也要变化,如下图所示:

问了下同事,然后用了keyup()这个方法。。。

查看了相关的其他类似于的方法,然后整理了下它们之间的区别如下:
  • KeyDown:用户摁下摁键时发生
  • KeyPress:用户摁下摁键,并且产生一个字符时发生
  • KeyUp: 用户释放某一个摁键时触发
完整的 keypress 过程分为两个部分: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>  

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>

这里分别用 keydown 、keyup、keypress做了实验,其中只有 keyup可以完整的将输入内容同步获取到,keydown和keypress总是无法获取到最后一个字符,这说明了三者之间的区别: 
keydown 总是在摁键摁下的当时触发,不能得到最后的输入结果,keypress也是一样

这是因为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>  

windows 窗体通过引发键盘事件来处理键盘入以响应 windows 消息,大多数 windows 窗体应用程序都通过处理键盘事件以独占方式处理键盘输入。

按键的类型

windows 窗体将键盘输入标识为:由按位 keys 枚举表示的虚拟键代码。

使用 keys 枚举,可以综合一系列按键以生成单个值,这些值与 WM_KEYDOWN 和 WM_SYSKEYDOWNWindows 消息所伴随的值相对应。通过处理 keydown 或 keyup 事件可以检测大多数的恶物理按键操作。字符键是 keys 枚举的子集,它们与 WM_KEYDOWN 和 WM_SYSKEYDOWNWindows 消息所伴随的值相对应,如果通过组合按键得到一个字符,则可以处理 keypress 事件来检测该字符。

键盘事件的顺序

  • 用户按 “a”键:则该键将被预处理和调度,而且会发生 keydown 事件
  • 用户按住 “a”键:则该键将被预处理和调度,而且会发生 keypress 事件
  • 用户松开 “a”键:则该键将被预处理和调度,而且会发生 keyup事件

键的预处理
像其他消息一样,键盘消息是在窗体或控件的 WindProc 方法中处理的,窗体或控件在处理键盘消息之前 PreProcessMessage 方法会调用一个或多个方法,这些方法可以被重写以处理特殊的字符键和物理按键。
keydown 触发后不一定触发 keyup 当 keydown按下后拖动鼠标,那么将不会触发 keyup事件

4 用法区别:

  • 系统由 keydown 返回键盘的代码 后再由 translateMessage 函数翻译成字符,然后在由 keypress 返回键盘的字符值(Ascall 字符)。

    所以,在使用时应根据你的目的,选择性的使用:

    如果你只想读取字符用 keypress;如果想读取各键盘的状态用 keydown

    • keydown: 用户再键盘上按下某按键时触发,一直按着某按键则会不断触发(opera浏览器除外);
    • keypress:用户按下一个按键,并产生一个字符时触发(也就是不管类似 shift、alt、ctrl之类的键只要用户按了一个能在屏幕上输出字符的按键 keypress 事件才会触发)一直按着某键则会不断触发

    • keypress主要用来捕获数字(注意:包括 shift+数字符号)、字母(注意:包括大小写)、小键盘除了F1-12、shift、Alt、Ctrl、insert、home、pgup、delete、end、pgdn、scrolllock、pause、numlock、菜单键、开始键、和方向键外的ANSI字符

    • keydown和keyup通常可以捕获除了 prscrn 所有键(这里不讨论特殊键盘的特殊键)

    • keydown和keyup对于单个字符捕获的 keyvalue 都是一个值,也就是不能判断单个字符的大小写

    • keypress 不区分小键盘和主键盘的数字字符

    • keydown 和 keyup 区分小键盘和主键盘的数字字符

    • 其中 prscrn按键和 keypress 、keydown 和 keyup 都不能捕获

  • 5.系统组合键的判定

    在使用键盘的时候通常会用到 Ctrl+shift+alt 类似的组合键功能,通过 keyup 事件能够处理(说明一下这里不用keydown事件:因为在判定keydown 的时候,ctrl、shift、和Alt属于一直按下状态然后再加另外一个键是不能准确捕获组合键,所以使用keydown 是不能准确判断的,要通过keyup事件来判定)

  • 6.捕获PreScrn按键事件

    通过一种钩子的方式可以判定PrScrn 按键事件,钩子可以获取任何键盘事件

参考资料:https://blog.csdn.net/winsolstice/article/details/78842805

zhangren.online
上一篇:如何将自己写的代码上传到github上
下一篇:不常见css属性汇总

您可能喜欢

​基于AOS页面滚动元素动画实例

​基于AOS页面滚动元素动画实例

​jquery文字左右无缝滚动

​jquery文字左右无缝滚动

​页面悬浮窗上下左右移动

​页面悬浮窗上下左右移动

​jquery ajax防重复提交

​jquery ajax防重复提交

回到顶部