专业网站建设_企业品牌营销 · 北京汇仁智杰科技有限公司

Web前端知識(shí)

首頁(yè) > 免費(fèi) > Web前端知識(shí) >

jQuery鍵盤事件使用教程

來(lái)源:北京匯仁智杰科技有限公司   時(shí)間:2015-12-09   點(diǎn)擊:

  jquery鍵盤事件使用介紹,需要的朋友可以參考下。

  一、首先需要知道的是:

  1、keydown() keydown事件會(huì)在鍵盤按下時(shí)觸發(fā)

  2、keyup()

  keyup事件會(huì)在按鍵釋放時(shí)觸發(fā),也就是你按下鍵盤起來(lái)后的事件

  3、keypress()

  keypress事件會(huì)在敲擊按鍵時(shí)觸發(fā),我們可以理解為按下并抬起同一個(gè)按鍵

  二、獲得鍵盤上對(duì)應(yīng)的ascII碼:

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

  console.log(event.keyCode);

  });

  tips: 上面例子中,event.keyCode就可以幫助我們獲取到我們按下了鍵盤上的什么按鍵,他返回的是ascII碼,比如說(shuō)上下左右鍵,分別是38,40,37,39;

  三、實(shí)例(當(dāng)按下鍵盤上的左右方面鍵時(shí))

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

  //判斷當(dāng)event.keyCode 為37時(shí)(即左方面鍵),執(zhí)行函數(shù)to_left();

  //判斷當(dāng)event.keyCode 為39時(shí)(即右方面鍵),執(zhí)行函數(shù)to_right();

  if(event.keyCode == 37){

  //do somethings;

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

  //do somethings;

  }

  });

  實(shí)例研究:

  比如:小說(shuō)網(wǎng)站中常見的按左右鍵來(lái)實(shí)現(xiàn)上一篇文章和下一篇文章;按ctrl+回車實(shí)現(xiàn)表單提交;google reader和有道閱讀中的全快捷鍵操作...(以此提高用戶體驗(yàn))

  如果我們要實(shí)現(xiàn)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;

  })

網(wǎng)絡(luò)營(yíng)銷推廣 . 北京匯仁智杰科技有限公司!

地址:北京市昌平區(qū)回龍觀龍冠大廈5層
咨詢:13370157521
業(yè)務(wù)QQ:373002979
E - mail:sales @ huirenzhijie.com
企業(yè)網(wǎng)站備案:京ICP備15021091號(hào)-1

匯仁智杰與眾不同

  • 有網(wǎng)絡(luò)推廣經(jīng)驗(yàn)
  • 有網(wǎng)站建站隊(duì)伍
  • 有大型網(wǎng)站建設(shè)經(jīng)驗(yàn)
  • 致力于營(yíng)銷型網(wǎng)站建設(shè)
  • 始終堅(jiān)持技術(shù)和服務(wù)同樣重要
查看PC版網(wǎng)站
備案號(hào):京ICP備15021091號(hào)-1 版權(quán)所有:匯仁智杰

主站蜘蛛池模板: 橡胶粉碎机_轮胎粉碎机_橡胶切条机_橡胶粉碎机价格_河南鑫世昌机械制造有限公司 | 三原图库 - 设计图片素材打包下载sytuku.com | 上海机械网 机械 机械加工 金属加工 上海机械网 机械设备 上海机械 | 上海钧尚电器有限公司 - Faulhaber电机 AMETEK pittman电机 AMETEK ROTRON军用航空风机 Exlar电动缸 MAE电机 MCG电机 CP电动工具 马头工具 AMCI驱动器 直流电机 减速箱 直流伺服电机,无刷电机,直线电机 直流防爆电机 防爆电机 汽车助力转向电机 EPS电机 faulhaber motor faulhaber gearbox NANOTEC电机 ELWOOD电机 PHYTRON电机 EXLAR伺服电动缸 高力矩、高性能直流电机,音圈电机,风机,直流风机,航空风机 | 卧式球磨机_干法球磨机_尼龙球磨机-无锡市少宏粉体科技有限公司 卧螺离心机-固液分离机-台州春鼎机械制造有限公司 | 江苏广分检测技术有限公司、电力安全工具检测、苏州绝缘工具检测、昆山电力安全工具检测-广分检测技术(苏州)有限公司 | 泰州光明会计师事务所有限公司-财务业务审计,会计服务业务及资产评估业务的专业服务机构 | 液压支架配件|液压支架立柱|液压支架千斤顶|液压支架换向阀|液压支架乳化油|液压支架密封件-山东卓力生产厂家 | 线宽测试仪丨光调制分析仪丨调制器 卓越光子-专注于光电解决方案 | 河北徐工鲲鹏工程机械有限公司无锡分公司 | 铸造工具|芯撑|铸造毛刷|枣强县永盛五金工具厂 | 兰州沙盘模型公司_兰州模型公司_兰州沙盘模型厂家_地形沙盘制作_兰州沙盘模型制作公司 | 上海网站建设-上海网站制作-网站设计-上海做网站公司-SEO优化推广-咏熠软件 | 医疗器械,理化实验室设备,微生物,培养基,一站式采购 - 杭州润泽仪器商城 | 上海钧尚电器有限公司 - Faulhaber电机 AMETEK pittman电机 AMETEK ROTRON军用航空风机 Exlar电动缸 MAE电机 MCG电机 CP电动工具 马头工具 AMCI驱动器 直流电机 减速箱 直流伺服电机,无刷电机,直线电机 直流防爆电机 防爆电机 汽车助力转向电机 EPS电机 faulhaber motor faulhaber gearbox NANOTEC电机 ELWOOD电机 PHYTRON电机 EXLAR伺服电动缸 高力矩、高性能直流电机,音圈电机,风机,直流风机,航空风机 | 球磨机配件_烘干机配件_回转窑配件_球磨机小齿轮_球磨机大齿轮-巩义市兴农机械制造公司 | 消泡剂_有机硅消泡剂_水处理消泡剂_新万成消泡剂厂家 | 微机保护装置_发电机保护_变压器保护_逆功率保护_防孤岛保护装置_光伏发电_杭州继保电气集团有限公司 | 云南昆明微信公众号小程序开发公司|抖音|网站建设APP制作-鸿翥网络 | 宁波允泰仪器有限公司-硬度计、拉力试验机、盐雾试验箱、影像测量仪、气动量仪 | 引流砂_铁钩料_吹氧管_涂层吹氧管_耐火涂层吹氧管-山东恒诚 | 石家庄驾校之家_石家庄驾校哪个好_石家庄驾校报名-石家庄万晟网络驾驶资讯 | 自走式缠绕机_上海德目包装设备厂家_在线式缠绕机_缠绕膜打包机 自装卸(挂桶)车|钩臂垃圾车|压缩垃圾车|密封自卸车|环卫垃圾车|餐厨车泔水车湖北程力专用车厂家 | 四字成语大全6000个,经典成语大全及解释,1000个50000个成语及解释 - 同鑫成语网 | 陶瓷复合钢管-专业提供江苏陶瓷钢管和陶瓷内衬复合钢管的生产厂家 | 校服定做厂家-屹奥校服-无限能量·校园绽放| 移动CRM软件_SaaS CRM_crm管理软件系统_crm客户关系管理系统_销售管理软件-上海企能软件科技有限公司 | 长沙设计公司丨品牌策划设计服务丨画册设计-石青|长沙画册设计 | 塑料凹版印刷机-干式复合机-分条机-涂布机生产厂家温州华印机械有限公司 | 铁谷网-垂直于铸造产业链服务平台、原材料采购网、行业资讯网 | 小型静音无油空压机价格-医用无油制氧空气压缩机-浙江盛源水润滑空压机制造有限公司 | 曙海培训-ZEMAX培训射频培训无线电培训GMS培训EMC培训电磁兼容性培训Maxwell培训欧姆龙培训procast培训可靠性培训光学培训工业机器人培训NI培训Linux培训5G培训Hadoop培训CFD培训 | 天津实验室纯水机-GMP认证制药纯化水设备-天津开发区瑞尔环保科技有限公司 | 和中出国移民官网|出国移民|加拿大移民|欧洲移民|爱尔兰移民|马耳他移民|希腊移民|美国移民|海外护照_和中移民 | 联想南京总代理-联想服务器|联想电脑笔记本代理商|联想工作站|dell服务器|HP服务器|南京IBM代理商|IBM V5000存储总包销-南京宇宽科技有限公司 | 球磨机配件_烘干机配件_回转窑配件_球磨机小齿轮_球磨机大齿轮-巩义市兴农机械制造公司 | 气密仪-气密性检测仪-气密性测试仪-苏州莱和电子科技有限公司 | 商标转让_商标买卖交易平台_商标转让注册网站-世标网 | 涡流探伤仪-超声波探伤仪-上海仓信电子科技有限公司 | 上进电缆(嘉兴)股份有限公司官网 - 光伏电缆|防火电缆|电力电缆|铝合金电缆专业生产厂家 | 山东净化车间_净化工程_净化公司-山东海蓝净化装饰工程有限公司 山东金起起重机械有限公司[官网]-金桥银路悬臂吊,金起龙门吊,山东金起起重行吊,单梁起重机 |