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基础知识之数据类型
Aug 06 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
Javascript的this用法
Jan 16 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
Angular 1.x个人使用的经验小结
Jul 19 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
vue实现tab栏点击高亮效果
Aug 19 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 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
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
php封装的page分页类完整实例
2016/10/18 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
python实现名片管理器的示例代码
2019/12/17 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
如何写辞职信
2015/05/13 职场文书
入党团支部推荐意见
2015/06/02 职场文书
开学典礼观后感
2015/06/15 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技