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 相关文章推荐
利用js对象弹出一个层
Mar 26 Javascript
屏蔽Flash右键信息的js代码
Jan 17 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
vue配置接口域名方法总结
May 12 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
四十九个javascript小知识实用技巧
Nov 20 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设计模式 FlyWeight (享元模式)
2011/06/26 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP里的单例类写法实例
2015/06/25 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
摘自百度的图片轮换效果代码
2007/11/19 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
浅谈Python的list中的选取范围
2018/11/12 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
自我评价正确写法范文
2013/12/10 职场文书
会议邀请书范文
2014/02/02 职场文书
文明演讲稿范文
2014/05/12 职场文书
应届毕业生自荐信
2014/05/28 职场文书
保密工作承诺书
2014/08/29 职场文书
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python