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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
element中的$confirm的使用
Apr 26 Javascript
ES5新增数组的实现方法
May 12 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
python导入时小括号大作用
2017/01/10 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
Numpy掩码式数组详解
2018/04/17 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Python3.4解释器用法简单示例
2019/03/22 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
《独坐敬亭山》教学反思
2014/04/08 职场文书
找工作求职信
2014/07/07 职场文书
企业法人代表证明书
2014/09/27 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
创业计划书之甜品店
2019/09/18 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
详解php中流行的rpc框架
2021/05/29 PHP