jQuery键盘事件示例

最新推荐文章于 2021-11-28 22:09:12 发布

cyan20115

最新推荐文章于 2021-11-28 22:09:12 发布

阅读量510

点赞数

文章标签： javascript ViewUI

jQuery带有三个键盘事件来捕获键盘活动-keyup（） ， keydown（）和keypress（） 。

keyup（）–用户释放键盘上的键时触发。
keydown（）–用户按下键盘上的某个键时触发。
keypress（）–用户按下键盘上的某个键时触发。

一般而言， keydown（）与keypress（）事件类似。实际上， keydown（）和keypress（）事件之间几乎没有什么区别。

1.重复按键

如果按住某个键，keydown（）事件将被触发一次，但是keypress（）事件将一直触发自身，直到您释放该键为止。

2.修饰键

键盘修饰键（ ctrl，shift，alt… ）将触发keydown（）事件，但不会触发keypress（）事件。

3. KeyCode – ASCII码

例如，A = 65和a = 97，请参考此ASCII表图表。

keydown（）和keyup（）将显示a = 65，A = 65（不区分大小写-小写和大写字母将显示相同的值）。
keypresss（）将显示a = 97，A = 65（区分大小写–小写和大写字母将显示不同的值）。

如果要捕获实际字符键入，请进行keypress（）事件。

在FireFox中不显示KeyCode？

event.keyCode在FireFox中无法运行，但在IE中可以完美运行。要在Firefox中获取event.keyCode ，您应该改用event。哪一个 ，jQuery也会推荐它。所以更好的方法应该是

var keycode = (event.keyCode ? event.keyCode : event.which);

自己尝试

<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
	span{
		padding:8px;
		margin:8px;
		color:blue;
	}
	div{
		padding:8px;
		margin:8px;
	}
</style>

</head>
<body>
  <h1>jQuery keyup(), keydown() and keypress() example</h1>

<label>TextBox : </label>
<input id="textbox" type="text" size="50" />

<div>
<label>1. keyup() Message :</label> <span id="msg-keyup"></span>
</div>

<div>
<label>2. keydown() Message :</label><span id="msg-keydown"></span>
</div>

<div>
<label>3. keypress() Message :</label><span id="msg-keypress"></span>
</div>

<script type="text/javascript">

$('#textbox').keyup(function(event){
	$('#msg-keyup').html('keyup() is triggered!, keyCode = ' 
              + event.keyCode + ' which = ' + event.which)
});

$('#textbox').keydown(function(event){
	$('#msg-keydown').html('keydown() is triggered!, keyCode = ' 
              + event.keyCode + ' which = ' + event.which)
});

$('#textbox').keypress(function(event){
	$('#msg-keypress').html('keypress() is triggered!, keyCode = ' 
              + event.keyCode + ' which = ' + event.which)
});

</script>
</body>
</html>

试试演示