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 相关文章推荐
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
javascript 代码是如何被压缩的示例代码
May 06 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
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
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
Smarty保留变量用法分析
2016/05/23 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
python实现Dijkstra静态寻路算法
2019/01/17 Python
彻底理解Python中的yield关键字
2019/04/01 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
内科护士实习自我鉴定
2013/10/17 职场文书
大学毕业生自我鉴定
2013/11/05 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
贷款委托书怎么写
2014/08/02 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
golang正则之命名分组方式
2021/04/25 Golang
html5调用摄像头实例代码
2021/06/28 HTML / CSS