使用JS监听键盘按下事件

news2025/1/27 9:12:44

事件说明

我们将键盘按下后事件的所有属性和方法打印出来(这里以按下1为例)

			document.onkeydown = function(event){
				console.log(event);
			}

 这里面有几个需要注意的属性

key:按下按键的名称

keyCode:按下按键的键码

altKey、ctrlKey、shiftKey:当组合按下(如ctrl+c)时,ctrlKey会变为true

一、查看所有键

(获取event.key 按下的按键名称)(获取event.keyCode 按下的键码)

			document.onkeydown = function(event){
				console.log("按下:"+event.key+"键:"+event.keyCode);
			}

按下任意按键后的效果:

二、监听回车按下事件

这里以回车键(键码为13)为例 ,如果需要监听不同的按键,修改键码即可

			document.onkeydown = function(event){
				if(event.keyCode==13){
					// 事件
					console.log("按下了回车键")
				}
			}

三、监听组合键

这里以CTRL+A为例

altKey:按下Alt+*组合键时为true

ctrlKey:按下Ctrl+*组合键时为true

shiftKey:按下Shift+*组合键时为true

			document.onkeydown = function(event){
				if(event.ctrlKey & event.keyCode == 65){
					console.log("按下了CTRL+A")
				}
			}

4、详细的键码值列表

字母和数字键的键码值
按键键码按键键码
A65J74
B66K75
C67L76
D68M77
E69N78
F70O79
G71P80
H72Q81
I73R82
字母和数字键的键码值
按键键码按键键码
S83149
T84250
U85351
V86452
W87553
X88654
Y89755
Z90856
048957
数字键盘上的键的键码值
按键键码按键键码
0968104
1979105
298*106
399+107
4100Enter108
5101-109
6102.110
7103/111
功能键键码值
按键键码按键键码
F1112F7118
F2113F8119
F3114F9120
F4115F10121
F5116F11122
F6117F12123
控制键键码值
按键键码按键键码
BackSpace8Esc27
Tab9Spacebar32
Clear12Page Up33
Enter13Page Down34
Shift16End35
Control17Home36
Alt18Left Arrow37
Cape Lock20Up Arrow38
控制键键码值
按键键码按键键码
Right Arrow39-_189
Dw Arrow40.>190
Insert45/?191
Delete46`~192
Num Lock144[{219
;:186\|220
=+187]}221
,<188'"222
多媒体键码值
按键键码按键键码
音量加175
音量减174
停止179
静音173
浏览器172
邮件180
搜索170
收藏171

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407751.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(项目演示、涉及知识点、源码分享)

基于 Vue3.x Vant UI 的多功能记账本&#xff08;一&#xff09; 文章目录基于 Vue3.x Vant UI 的多功能记账本&#xff08;一&#xff09;Vue3.x 实现多功能记账本1、前言2、项目演示3、涉及知识点4、写到最后&#xff08;附源码&#xff09;Vue3.x 实现多功能记账本 1、前…

文件在线浏览之微软office在线预览及隐藏的坑和其他更优解决办法

一 微软也已经免费提供在线版本office预览啦 https://view.officeapps.live.com/op/view.aspx?srcURLsrc后面的URL是网上能访问到的文件地址&#xff0c;比如http://abc.com/file/demo.xlsx 直接访问&#xff1a;https://view.officeapps.live.com/op/view.aspx?srchttp:/…

js模板字符串

js模板字符串模板字符串&#xff08;模板字面量&#xff09;在模板字符串中插入变量在模板字符串中插入表达式模板字符串中可以换行模板字符串中可以调用函数模板字符串支持嵌套使用模板字符串&#xff08;模板字面量&#xff09; ES6 中引入了模板字符串&#xff0c;让我们省…

Vue3 + vite 创建项目

项目创建 vite的介绍 首先要想使用vite来创建一个vue项目&#xff0c;要把vue脚手架升级成为5.0.1版本&#xff0c;但是有一个很大的缺陷&#xff0c;就是升级过后不会再向下兼容vue2的语法创建项目的方式 脚手架升级为5.0.1版本&#xff1a;cnpm install vuenext 或 yarn gl…

Redux最新实践指南之Redux-Toolkit

前言 redux-toolkit是目前redux官方推荐的编写redux逻辑的方法&#xff0c;针对redux的创建store繁琐、样板代码太多、依赖外部库等问题进行了优化&#xff0c;官方总结了四个特点是简易的/有想法的/强劲的/高效的&#xff0c;总结来看&#xff0c;就是更加的方便简单了。 从官…

vue-treeselect 的基本使用

官网地址&#xff1a;Vue-Treeselecthttps://vue-treeselect.js.org/公司用 若依 搞了一个速成项目&#xff0c;若依是一个免费开源的前后端项目&#xff0c;感兴趣的朋友百度。 在里边接触到了一个神奇的东西 &#xff1a;vue-treeselect&#xff0c;用起来真的是一言难尽&am…

uniapp全局弹窗(APP端)

uniapp自带的提示框不符合我们的要求&#xff0c;需要自己写一个提示框&#xff0c;且全局通用。 解决思路: 使用 plus.nativeObj 来绘制窗口以及事件监听。 官方文档 1. 首先创建一个整个屏幕的控件&#xff0c;作为一个父容器。 此时还看不到任何东西 let screenHeight…

牛客网前端刷题(二)

还在担心面试不通过吗?给大家推荐一个超级好用的刷面试题神器:牛客网,里面涵盖了各个领域的面试题库,还有大厂真题哦! 赶快悄悄的努力起来吧,不苒在这里衷心祝愿各位大佬都能顺利通过面试。 面试专栏分享,感觉有用的小伙伴可以点个订阅,不定时更新相关面试题:面试专栏…

微信小程序之开发遇到 does not have a method “xxxx“ to handle event “tap“ 问题的解决方案【已解决】

今天在开发一个小功能&#xff0c;copy了之前写的代码&#xff0c;但是在实现功能时&#xff0c;出现了如下问题&#xff1a; 先在这简单总结一下解决方案&#xff1a; 在调用方法时&#xff0c;在" "中前后多加了空格&#xff1b;在 js 中没有定义该方法&#xff1…

纯前端导出表格

前端 excel 表格导出 我们习惯了后端去处理表格&#xff0c;直接接口返回 &#xff0c;那前端如何轻松的导出表格呢&#xff1f; 文章目录前端 excel 表格导出Ⅰ. 通过 js-xlsx ⭐⭐⭐⭐⭐安装① vue2 中使用② vue3 中使用③ react 中使用Ⅲ. 通过 vue-json-excel ⭐⭐安装使…

SpringBoot--Filter过滤器(一)

一.了解过滤器Filter 过滤器: Filter, 是 Servlet 技术中最实用的技术。过滤器是处于客户端和服务器之间的一个过滤网,可以过滤掉一些不符合要求的请求常见场景: Session 校验判断用户权限不符合设定条件&#xff0c;则会被重定向特殊的地址或者设定的响应过滤敏感词汇设置编…

一天撸一个财务APP系统【安卓端+前端+后端】

昨天有个粉丝朋友也想学开发Web和小程序、安卓&#xff0c;问可以在大学学会吗&#xff1f; 在学校学到的东西真的有限&#xff1a; 在很多的高校&#xff0c;有一些教授是学院派的&#xff0c;他们没有做过多少开发工作&#xff0c;上课就是照本宣科&#xff0c;讲的知识点都…

Vue打包优化篇-CDN加速

优化原因 在没有使用cdn加速之前打包后数据如下&#xff0c;可以看出element-ui、vue、vuex、vue-router这些依赖都打进chunk-vendors.js中导致体积很大&#xff0c;假设再来很多依赖项是不是更大&#xff0c;同时也会影响单页面应用首屏加载速度&#xff0c;所以这里采用一种打…

Vue的组件化编程

非单文件组件 注册局部组件 此时上面书写的组件都是局部组件,每一个vue实例要想使用上面的组件时都需要在components中进行注册才可以使用,此时如果再创建一个Vue实例vms,这个实例不在components中注册就直接使用组件会产生什么变化: 此时控制台报错 ‘是否正确注册了组件&a…

function 函数

一、函数的基本注意事项 function函数的名字也是一个标识符&#xff0c;通过关键字function申明一个函数 function 函数名(){ 代码块 } 二、函数基本用法 1、形参与实参 1、形参与实参可以有无数个&#xff0c;实参按照顺序赋值给形参&#xff1b; 2、实参个数不一定要与实…

web前端面试高频考点——Vue原理(理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM)

系列文章目录 内容参考链接Vue基本使用Vue的基本使用&#xff08;一文掌握Vue最基础的知识点&#xff09;Vue通信和高级特性Vue组件间的通信及高级特性&#xff08;多种组件间的通信、自定义v-model、nextTick、插槽&#xff09;Vue高级特性Vue的高级特性&#xff08;动态组件…

axios发post请求,后端接收不到参数的原因及解决

做分页数据时&#xff0c;使用vue3 axios发post请求&#xff0c;后端服务调用成功但数据没有根据参数动态变化&#xff0c;换为js ajax也是同样错误。 后来是后端没有接收到参数。 网上看了资料&#xff0c;原因&#xff1a; 使⽤axios请求数据时&#xff0c;我们的 …

Module Federation在vue3中使用vue2的组件

前言&#xff1a; 备注&#xff1a;本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本&#xff0c;如Vue2的组件时在Vue2中使用&#xff0c;但我为什么会在Vue3项目中去使用Vue2的组件呢&#xff0c;其实是因为历史原因。好…

点击《el-table》让选中的行变色,亲测实用

前期回顾 Vue项目实战 —— 哔哩哔哩移动端开发_0.活在风浪里的博客-CSDN博客撑着下班前半小时我用vue写《哔哩哔哩 项目》移动端、新手还在哭、老鸟一直在笑。。。技术选型Vue2&#xff0c;技术栈有axios、Vh等&#xff0c;下班过来敲哈哈https://blog.csdn.net/m0_5790…

vite+vue3+ts 手把手教你创建一个vue3项目

使用vite 创建一个vue3项目&#xff0c;基本全程cv。 安装router&#xff0c;less / scss&#xff0c;pinia&#xff0c;axios&#xff0c; element / Ant Design Vue&#xff0c;Echarts 以及如何配置别名&#xff0c;自定义组件&#xff0c;vue-devtools插件。 目录 1、创建…