一个jquery例子,搞定获取键盘事件

张映 发表于 2011-01-31

分类目录: nodejs/vue/js/jquery

标签:, , ,

一,我们什么时候要用到获取键盘事件

做web的时候,为了更人性的设计,我们有的时候会用到键盘事件。例如:输入框下拉提示框,通过键盘的上下键盘来选择自己想要的内容,google的输入框的下拉提示。当我们浏览相册的时候,我们可以能过键盘的左右键,来查看相片。当我们浏览长篇小说,用鼠标滚动很容易不知道看到哪一个行了,可以通键盘上下键来进行翻页,这些小细节也是非常重要的。做网站很大程度在于细节的处理。

二,jquery的键盘事情函数种类

1,keydown事件是在键盘按下时触发的事件

2,keyup事件是在按下键弹起时触发的事件

3,keypress事件是在键盘按下时触发的事件

keypress和keydown在功能差不多,但是在获取事件的内容上有所不同。

二,举例说明

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr" lang="utf-8">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="jquery-1.3.2.js" type="text/javascript"></script>    
</head>
<body>
<input  value="fi"  name="search" id="search_input" maxlength="50" autocomplete="off">
</body>
</html>
<script type="text/javascript">
 $('#search_input')
 .keypress(function(event){
 alert("keypress");
 })
 .keydown(function(event){
 alert("keydown");
 })    
 .keyup(function(event){
 alert("keyup");
 });
</script>

三,试验结果

1,在上面的输入框中,输入一个字母r时,第一次会弹出keydown,以后都会提示keypress

2,当我们按下pg dn銉时,会先弹出keyup然后在弹出keydown

3,当我们按下shift+c时,只会弹出keypress

4,当我们按下ctrl+alt时,就不会出现keypress,第一次会出现二个keydown,第二次按的时候,先出现keyup,然后在出现keydown

可能性有很多,我们只要试一试常用的銉就可以了。

四,获得键盘事件对应的ASCII值

<script type="text/javascript">
 $('#search_input')
 .keydown(function(event){
 alert(event.keyCode);                     
 })    
</script>


转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/jsjquery/1211.html/comment-page-1

1 条评论

  1. bandit 留言

    能否把数字验证去掉呀,这样恢复起来方便。