jQuery简单获取键盘事件的方法

本文实例讲述了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>

更多关于jQuery事件操作相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery dialog键盘事件代码

    在dilog的open事件中 添加如下代码段 复制代码 代码如下: $("#dlgSearch").dialog({ autoOpen: false, bgiframe: true, width: 600, //height: 225, modal: true, resizable: false, open: function() { //jquery之dialog的键盘事件(输入完毕回车检索) $(this).bind("keypress.ui-dialog",

  • jquery键盘事件介绍

    一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 二.获得键盘上对应的ascII码: $(document).keydown(function(event){ alert(event.keyCode); }); $tips: 上面例子中,event.keyCode就可以帮助我

  • jquery快捷动态绑定键盘事件的操作函数代码

    复制代码 代码如下: (function($) { $.extend({ key_fn:[], //存放绑定的字符对应的函数 key_code:[], //存放字符 key_bind:function(ch,callback){ var KeyCode = {a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,s:83,t:84,u:85,v:86,w:87,x:88,

  • jquery的键盘事件修改代码

    复制代码 代码如下: (function($){ var no_ie_pr=function(e){ var _this=e; var tabpr=function(e){ _this.attr('tabIndex', 1).click(function(){ _this.focus(); }); if(!$.browser.msie){ _this.css("outline-style", "none"); } } var gettag=_this[0].tagN

  • jquery HotKeys轻松搞定键盘事件代码

    使用方法: 复制代码 代码如下: $.hotkeys.add('键名', function(){ 要实现的目的}); //键名可以是单键,也可以是组合键例如:ctrl+c就表示同时按下ctrl和c. 取消某个键的事件: 复制代码 代码如下: $.hotkeys.remove('键名'); 具体演示效果请转到我专门翻译的一个页面,你可以自己测试特殊键和组合键:http://img.jb51.net/online/jquery_HotKeys.html 下载插件地址::http://code.goo

  • 扩展jQuery 键盘事件的几个基本方法

    文件名:jquery.hy.key.js 复制代码 代码如下: /* ================================================================================ Desc: 扩展对键盘事件的方法 Called by: Auth: 大气象 Date: 2009-10-30 ===============================================================================

  • jquery keypress,keyup,onpropertychange键盘事件

    起初用js 的onkeyup事件,但始终没能触发.该事件不知道别的什么地方监视了,js的事件有传递,也可以阻断,蛮麻烦,情况太多.找了好久,终于找到了一种解决方案,通过onpropertychange事件可以迎刃而解. 复制代码 代码如下: $("#textboxID").bind("onpropertychange", function(){ //alert( $(this).text() ); //自动截取的逻辑代码 }); firefox没有onpropert

  • js和jquery实现监听键盘事件示例代码

    js和jquery实现监听键盘事件示例代码

    项目中要监听键盘组合键CTRL+C,以便做出对应的响应.查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox.Chrome.IE中均可以使用. 一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function keyListener(e

  • jquery键盘事件使用介绍

    一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 二.获得键盘上对应的ascII码: 复制代码 代码如下: $(document).keydown(function(event){ console.log(event.keyCode); }); $tips: 上面例子中,ev

  • jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)

    键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部.键盘事件在不同的浏览器中作用的范围是不一样的,通常这种键盘事件可以作用于 Form元素,a标签元素,window ,document这样的元素上.在所有可以获得交点的元素上是可以触发键盘事件的,可以获得焦点的元素可以这样理解,在使用Tab键的时候可以跳跃到的元素就是可以使用键盘事件的元(在没有为这些元素设置tabindex属性值的情况下,当tabindex设置为负数的时候,在使用Tab键的时候就不会获得焦点). 键盘事件可以传

  • jquery.hotkeys监听键盘按下事件keydown插件

    jquery.hotkeys监听键盘按下事件keydown插件

    jquery.hotkeys文件下载:  http://xiazai.jb51.net/201405/yuanma/jquery_hotkeys(jb51.net).rar 参照了一下它的文档用法,我们可以这样使用: 复制代码 代码如下: <script src="jquery-1.4.1.min.js" type="text/javascript"></script>    <script src="jquery.hotke

  • jquery 按键盘上的enter事件

    接下来我们使用Jquery实现回车键Enter切换焦点,此代码在常用浏览器IE7, IE8, Firefox 3, Chrome 2 和 Safari 4测试通过.使用的开发工具是微软VS2010+Jquery框架 实现步骤如下 1.首先引用Jquery类库 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 2.Javascript代码 复制代

随机推荐