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中的new使用
Mar 20 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 Javascript
Nest.js 授权验证的方法示例
Feb 22 Javascript
vue实现锚点定位功能
Jun 29 Vue.js
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 一元分词算法
2009/11/30 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Django rest framework实现分页的示例
2018/05/24 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
通过实例了解python property属性
2019/11/01 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
法国珠宝店:CLEOR
2017/01/29 全球购物
cf战队收人广告词
2014/03/14 职场文书
个人担保书范文
2014/05/20 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
复兴之路观后感
2015/06/02 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
javascript的setTimeout()使用方法总结
2021/11/20 Javascript