深入理解JQuery keyUp和keyDown的区别

前端技术 2023/09/05 JavaScript

定义和用法
完整的 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>

本文地址：https://www.stayed.cn/item/13849

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案