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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
vue实现拖拽进度条
Mar 01 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数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
php中的观察者模式简单实例
2015/01/20 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
理解python正则表达式
2016/01/15 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
python三方库之requests的快速上手
2019/03/04 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
python数据抓取3种方法总结
2021/02/07 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
四年的个人工作自我评价
2013/12/10 职场文书
生产班组长岗位职责
2014/01/05 职场文书
教师党员承诺书2015
2015/01/21 职场文书
建国大业观后感
2015/06/01 职场文书
任长霞观后感
2015/06/16 职场文书
python开发飞机大战游戏
2021/07/15 Python
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS