本文最后更新于 2039 天前,其中的信息可能已经有所发展或是发生改变。
1. jQuery键盘事件之keydown()与keyup()事件
鼠标有mousedown,mouseup之类的事件,这是根据人的手势动作分解的2个触发行为。相对应的键盘也有这类事件,将用户行为分解成2个动作,键盘按下与松手,针对这样的2种动作,jQuery分别提供了对应keydown与keyup方法来监听
keydown事件:
当用户在一个元素上第一次按下键盘上字母键的时候,就会触发它。使用上非常简单,与基本事件参数处理保持一致,这里使用不在重复了,列出使用的方法
//直接绑定事件
$elem.keydown( handler(eventObject) )
//传递参数
$elem.keydown( \[eventData \], handler(eventObject) )
//手动触发已绑定的事件
$elem.keydown()
keyup事件:
当用户在一个元素上第一次松手键盘上的键的时候,就会触发它。使用方法与keydown是一致的只是触发的条件是方法的
注意:
- keydown是在键盘按下就会触发
- keyup是在键盘松手就会触发
- 理论上它可以绑定到任何元素,但keydown/keyup事件只是发送到具有焦点的元素上,不同的浏览器中,可获得焦点的元素略有不同,但是表单元素总是能获取焦点,所以对于此事件类型表单元素是最合适的。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
/* float: left; */
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
em {
font-weight: 900;
color: red;
}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>keydown()与keyup()事件</h2>
<div class="left">
<h4>测试一</h4>
<div class="aaron">监听keydown输入:
<input class="target1" type="text" value="" /><br /> 按下显示输入的值:
<em></em>
</div>
<h4>测试二</h4>
<div class="aaron">监听keyup输入:
<input class="target2" type="text" value="" /><br /> 松手显示输入的值:
<em></em>
</div>
</div>
<script type="text/javascript">
//监听键盘按键
//获取输入的值
$('.target1').keydown(function(e) {
$("em:first").text(e.target.value)
});
//监听键盘按键
//获取输入的值
$('.target2').keyup(function(e) {
$("em:last").text(e.target.value)
});
</script>
</body>
</html>
2. jQuery键盘事件之keypress()事件
在input元素上绑定keydown事件会发现一个问题:
每次获取的内容都是之前输入的,当前输入的获取不到
keydown事件触发在文字还没敲进文本框,这时如果在keydown事件中输出文本框中的文本,得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本
当浏览器捕获键盘输入时,还提供了一个keypress的响应,这个跟keydown是非常相似,这里使用请参考keydown这一节,具体说说不同点
keypress事件与keydown和keyup的主要区别
- 只能捕获单个字符,不能捕获组合键
- 无法响应系统功能键(如delete,backspace)
- 不区分小键盘和主键盘的数字字符
总而言之,
KeyPress主要用来接收字母、数字等ANSI字符,而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如:功能键(F1-F12)、编辑键、定位键以及任何这些键和键盘换档键的组合等。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
em {
font-weight: 900;
color: red;
}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>keypress()事件</h2>
<div class="left">
<div class="aaron">监听keypress输入:
<input class="target1" type="text" value="" /><br /> 输入中文测试,无法显示:
<em></em>
</div>
</div>
<script type="text/javascript">
//监听键盘按键
//获取输入的值
$('.target1').keypress(function(e) {
$("em").text(e.target.value)
});
</script>
</body>
</html>