jQuery keydown和keyup事件

在 jQuery 中,常用的键盘事件共有两种:keydown:键盘按下;keyup:键盘松开。keydown 表示键盘按下的一瞬间所触发的事件,而 keyup 表示键盘松开的一瞬间所触发的事件。对于键盘来说,都是先有“按下”才有“松开”,也就是 keydown 发生在 keyup 之前。

举例:统计输入字符的长度

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#txt").keyup(function(){
                var str = $(this).val();
                $("#num").text(str.length);
            })
        })
    </script>
</head>
<body>
    <input id="txt" type="text" />
    <div>
        字符串长度为:
        <span id="num">0</span>
    </div>
</body>
</html>

预览效果如图 1 所示。

统计输入字符的长度
图 1:统计输入字符的长度

在这个例子中,我们实现的效果是:用户输入字符串后,会自动计算字符串的长度。

实现原理很简单,每输入一个字符,我们都需要按一下键盘。每次输完该字符,也就是松开键盘时,都会触发一次 keyup 事件,此时我们计算字符串的长度即可。

举例:验证输入是否正确

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            //定义一个变量,保存正则表达式
            var myregex = /^[0-9]*$/;
            $("#txt").keydown(function(){
                var value = $(this).val();
                //判断输入是否为数字
                if (myregex.test(value)) {
                    $("div").text("输入正确");
                } else {
                    $("div").text("必须输入数字");
                }
            })
        })
    </script>
</head>
<body>
    <input id="txt" type="text" />
    <div style="color:red;"></div>
</body>
</html>

默认情况下,预览效果如图 2 所示。

默认效果
图 2:默认效果

当我们输入文本时,预览效果如图 3 所示。

输入文本时的效果
图 3:输入文本时的效果

几乎每一个网站的注册功能都会涉及表单验证,例如判断用户名是否已注册、密码长度是否满足要求、邮箱格式是否正确等。而涉及表单验证,就肯定离不开正则表达式。其实正则表达式也是前端非常重要的内容,可以关注 C语言中文网的正则表达式教程来进一步学习。

键盘事件一般有两个用途:表单操作和动画控制。其中,动画控制常见于游戏开发。例如,图 4 所示的《英雄联盟》中人物的行走或技能释放,就是通过键盘来控制的。用键盘事件来控制动画一般比较难,我们放到后面再介绍。

《英雄联盟》
图 4:《英雄联盟》

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/23825.html

(0)
上一篇 2021年7月20日
下一篇 2021年7月20日

相关推荐

发表回复

登录后才能评论