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 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
前端性能优化及技巧
2016/05/06 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
Python中实现常量(Const)功能
2015/01/28 Python
python开启多个子进程并行运行的方法
2015/04/18 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
如何基于线程池提升request模块效率
2020/04/18 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
教育专业个人求职信
2013/12/02 职场文书
夜班门卫岗位职责
2013/12/09 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
党员三严三实心得体会
2014/10/13 职场文书
晚会开场白和结束语
2015/05/29 职场文书
2016年情人节问候语
2015/11/11 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
python not运算符的实例用法
2021/06/30 Python
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python
vue使用echarts实现折线图
2022/03/21 Vue.js