Web前端知识

首页 > 免费 > Web前端知识 >

jQuery键盘事件使用教程

来源:北京汇仁智杰科技有限公司   时间:2015-12-09   点击:

  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;

  })

网络营销推广 . 北京汇仁智杰科技有限公司!

地址:北京市昌平区回龙观龙冠大厦5层
咨询:13370157521
业务QQ:373002979
E - mail:sales @ huirenzhijie.com
企业网站备案:京ICP备15021091号-1

汇仁智杰与众不同

  • 有网络推广经验
  • 有网站建站队伍
  • 有大型网站建设经验
  • 致力于营销型网站建设
  • 始终坚持技术和服务同样重要
查看PC版网站
备案号:京ICP备15021091号-1 版权所有:汇仁智杰