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 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
树结构之JavaScript
Jan 24 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 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
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
深入理解PHP内核(一)
2015/11/10 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
javascript实现计算器功能
2020/03/30 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
numpy.delete删除一列或多列的方法
2018/04/03 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Python读写文件基础知识点
2019/06/10 Python
详解Django 时间与时区设置问题
2019/07/23 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
医学专业毕业生个人的求职信
2013/12/04 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
辩论会主持词
2015/07/03 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers