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的一些简单控制
Jun 04 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 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简单操作mysql数据库的类
2015/04/16 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
python实现网站的模拟登录
2016/01/04 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
python破解zip加密文件的方法
2018/05/31 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
django使用graphql的实例
2020/09/02 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
物流管理专业大学生自荐信
2013/10/04 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
酒店个人求职信范文
2014/01/25 职场文书
中学生期末评语
2014/02/03 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
2016特色励志班级口号
2015/12/24 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis