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中null与undefined分析
Jul 25 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
JS获取时间的方法
Jan 21 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
JS实现碰撞检测效果
Mar 12 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
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
从vue源码看props的用法
2019/01/09 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
python 实现矩阵按对角线打印
2019/11/29 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
python unichr函数知识点总结
2020/12/16 Python
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
经典促销广告词大全
2014/03/19 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
优秀英文求职信范文
2015/03/19 职场文书
开场白怎么写
2015/06/01 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python