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 15 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
js编写选项卡效果
May 23 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
如何用JS实现网页瀑布流布局
Apr 24 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 面向对象 PHP5 中的常量
2010/05/05 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
php中JSON的使用方法
2015/04/30 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
浅谈js闭包理解
2019/03/28 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
深入解析Python中的WSGI接口
2015/05/11 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
Python networkx包的实现
2020/02/14 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
python中append函数用法讲解
2020/12/11 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
Weblogic的布署方式
2013/08/23 面试题
运动会广播稿80字
2014/01/23 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
太太口服液广告词
2014/03/20 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
银行求职自荐信
2014/06/30 职场文书
班主任寄语2015
2015/02/26 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
MySQL慢查询优化解决问题
2022/03/17 MySQL
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python