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 相关文章推荐
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
js字符串操作方法实例分析
May 06 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
jquery拖动改变div大小
Jul 04 jQuery
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
Vue实现购物车实例代码两则
May 30 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
Python脚本处理空格的方法
2016/08/08 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python 数据结构之队列的实现
2017/01/22 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
numpy 声明空数组详解
2019/12/05 Python
Python configparser模块操作代码实例
2020/06/08 Python
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
结对共建协议书
2014/08/20 职场文书
社区活动策划方案
2014/08/21 职场文书
文明礼貌主题班会
2015/08/14 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers