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


Posted in Javascript onJune 24, 2020

项目中要监听键盘组合键CTRL+C,以便做出对应的响应。查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox、Chrome、IE中均可以使用。

一、使用javascript实现

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title></title> 
 <script> 
  function keyListener(event){ 
  if (event.ctrlKey && event.keyCode === 86){ 
   alert('你按下了CTRL+V'); 
  } 
  } 
 </script> 
 </head> 
 
 <body> 
 Ctrl+V:<textarea onkeydown="keyListener(event);">粘贴粘贴</textarea> 
 </body> 
 
</html>

二、使用jquery实现

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title></title> 
 <script src="http://tztest4.ptmind.cn/js/jquery-1.8.0.min.js?v=3/11"></script> 
 <script> 
  $(function(){ 
  $("#aaa").keyup(function(event){ 
   if (event.ctrlKey && event.keyCode === 67){ 
   alert('你按下了CTRL+C'); 
   } 
  }); 
   
  }); 
  /* 
  * $('input').keyup(function(){...}); 
  * $('input').bind('keyup', function(){...}); 
  * $('input').live('keyup', function(){...}); 
  */ 
 </script> 
 </head> 
 
 <body> 
 Ctrl+C:<textarea id="aaa">复制复制</textarea> <br /> 
 </body> 
 
</html>

三、说明

event.ctrlKey
功能:检测事件发生时Ctrl键是否被按住了。
语法:event.ctrlKey
取值:true | false  1|0
说明:
ctrlKey属性为true表示事件发生时Ctrl键被按下并保持,为false则Ctrl键没有按下。
ctrlKey属性可结合鼠标或键盘使用,多用于制作一些快捷操作方式。

四、详细keyCode值列表

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

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

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

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

以上就是js和jquery实现监听键盘事件示例代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript 全角转换实现代码
Jul 17 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
jQuery简单操作cookie的插件实例
Jan 13 #Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 #Javascript
javascript中的作用域和闭包详解
Jan 13 #Javascript
JSON+Jquery省市区三级联动
Jan 13 #Javascript
Easyui form combobox省市区三级联动
Jan 13 #Javascript
轻松实现javascript图片轮播特效
Jan 13 #Javascript
简单的JS时钟实例讲解
Jan 13 #Javascript
You might like
PHP初学者头疼问题总结
2006/10/09 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
JQuery 入门实例1
2009/06/25 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
Vue渲染函数详解
2017/09/15 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python自定义主从分布式架构实例分析
2016/09/19 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
python之mock模块基本使用方法详解
2019/06/27 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Pygame框架实现飞机大战
2020/08/07 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
详解Python中第三方库Faker
2020/09/25 Python
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
自我鉴定200字
2013/10/28 职场文书
自我评价范文分享
2014/01/04 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
个人务虚会发言材料
2014/10/20 职场文书
vue+spring boot实现校验码功能
2021/05/27 Vue.js
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android