在 jQuery 中，常用的键盘事件共有两种：keydown：键盘按下；keyup：键盘松开。keydown 表示键盘按下的一瞬间所触发的事件，而 keyup 表示键盘松开的一瞬间所触发的事件。对于键盘来说，都是先有“按下”才有“松开”，也就是 keydown 发生在 keyup 之前。
图 1：统计输入字符的长度
图 2：默认效果
图 3：输入文本时的效果
图 4：《英雄联盟》
举例：统计输入字符的长度
<!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