jQuery - 事件（三）之 键盘事件
2016-08-08 本文已影响20人
AshengTan
键盘事件，元素对键盘的诸如按下、松开等事件做出反应。
本文目录：
- keydown()；
- keyup()；
- keypress()。
keydown(handler)
键盘按下时执行的事件处理函数。
| 参数 | 类型 | 描述 |
|---|---|---|
| handler | Function | 必选。事件触发时执行的函数。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件05_keydown()</title>
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<input type="text">
<script>
$(function () {
$("input").keydown(function(){
alert("keydown");
});
});
</script>
</body>
</html>
效果演示：
keydown().gif
keyup(handler)
键盘松开时执行的事件处理函数。
| 参数 | 类型 | 描述 |
|---|---|---|
| handler | Function | 必选。事件触发时执行的函数。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件06_keyup()</title>
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<input type="text">
<script>
$(function () {
$("input").keyup(function(){
alert("keyup");
});
});
</script>
</body>
</html>
keypress(handler)
键盘按下时执行的事件处理函数。
| 参数 | 类型 | 描述 |
|---|---|---|
| handler | Function | 必选。事件触发时执行的函数。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件07_keypress()</title>
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<input type="text">
<script>
$(function () {
$("input").keypress(function(){
alert("keypress");
});
});
</script>
</body>
</html>
关于 keydown，keypress，keyup 的区别，请看 [这里]。(http://zhidao.baidu.com/link?url=9DCbcLhcwGTqO4th68PmWrfiOzGABqcjtAiROYuedbmwbn4VApwlWj_g6Dhv5xjLjVTZWNEfKpCIlRAadSDDLZiOQ2w_FJlv8hi-bF_fa5e)
