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;
});

以上

原文链接:https://www.cnblogs.com/xiangsj/p/5996454.html

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值