支付宝赞助帐号:service@kuitao8.com 

jquery键盘事件使用介绍

Created2013-06-11   Views 1902    Author 懒人程序
  jquery键盘事件使用介绍,需要的朋友可以参考下。

  一、首先需要知道的是:

  1、keydown()

  keydown事件会在键盘按下时触发.

  2、keyup()

  keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件

  3、keypress()

  keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键

  二、获得键盘上对应的ascII码:

  复制代码代码如下:

  $(document).keydown(function(event){

  console.log(event.keyCode);

  });

  $tips: 上面例子中,event.keyCode就可以帮助我们获取到我们按下了键盘上的什么按键,他返回的是ascII码,比如说上下左右键,分别是38,40,37,39;

  三、实例(当按下键盘上的左右方面键时)

  复制代码代码如下:

  $(document).keydown(function(event){

  //判断当event.keyCode 为37时(即左方面键),执行函数to_left();

  //判断当event.keyCode 为39时(即右方面键),执行函数to_right();

  if(event.keyCode == 37){

  //do somethings;

  }else if (event.keyCode == 39){

  //do somethings;

  }

  });

  实例研究:

  比如:小说网站中常见的按左右键来实现上一篇文章和下一篇文章;按ctrl+回车实现表单提交;google reader和有道阅读中的全快捷键操作...(以此提高用户体验)

  如果我们要实现ctrl+Enter就是ctrl+回车提交表单,可以这样:

  复制代码代码如下:

  $(document).keypress(function(e) {

  if (e.ctrlKey && e.which == 13)

  $("form").submit();

  })

  //键盘操作

  $(document).keydown(function(event){

  var e = event || window.event;

  var k = e.keyCode || e.which;

  switch(k) {

  case 37:

  //…

  break;

  case 39:

  //…

  break;

  }

  return false;

  })

上一篇: jQuery代码优化 事件委托篇
下一篇: 遍历jquery对象的代码分享
支持键盘 ← →

邮件订阅

订阅我们的精彩内容