JavaScript监听键盘事件代码实现


Posted in Javascript onJune 03, 2020

在写网页的时候,常常需要监听键盘事件,让我们来看看如何实现吧。

监听方式

键盘事件往往是全局监听,设监听的函数为keyboard()。

keyup事件类型。该类型触发条件为按键按下去并松开。

//长按并松开只触发一次
document.addEventListener('keyup', keyboard);
document.onkeyup = keyboard; //记得不要加括号!

keydown事件类型。该类型触发条件为按键按下去。

//长按可以触发多次
document.addEventListener('keydown', keyboard);
document.onkeydown = keyboard;

keypress事件类型。该类型触发条件为按键按下去且产生了字符。

//长按可以触发多次
//遇到'1','a',回车等按键可以触发,但del键,向上键等则不会
document.addEventListener('keypress', keyboard);
document.onkeypress = keyboard;

需要注意的是:keypress的兼容性并不是很好,比如安卓系统就不支持,所以尽量避免使用。
onkey___ 和 addEventListener之间,最好选后者。

另外,如果keyboard不带参,则监听的事件是任何符合条件的按键,即只要你按了键盘,就会触发事件。

监听具体事件(即按了哪个键)

上文提到的keyboard函数是可以设形参的,且在调用的时候不需加实参。

function keyboard(eve) {
...
}
document.onkeyup = keyboard; //不需要加参数和括号

此时的eve便是键盘事件类型的变量,它有以下属性:

属性 意义
key 事件对应按钮的字符
keyCode 事件对应按钮的Unicode码
which 事件对应按钮的Unicode码

其中,不同的浏览器对keyCode和which的支持情况是不同的,下文会有关于提升兼容性的方法。

举个例子:

<p id="msg1"></p>
<p id="msg2"></p>

<script>
	function keyboard(eve) {
		msg1.textContent += eve.key;
		msg2.textContent += eve.keyCode || eve.which;
 		//该方法可以提升代码的兼容性
	}
	document.onkeyup = keyboard;
</script>

input:
a

output:
a
65

需要注意的是:key属性的兼容性并不高,最好是先获取Unicode码,再转成对应字符。

let x = eve.keyCode || eve.which;
let key = String.fromCharCode(x);

想知道某个按键的Unicode码,可以查手册,也可以在控制台中试验。
简单点的可以用ASCII码来顶着 https://www.runoob.com/tags/html-ascii.html 。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
javascript实现拖放效果
Dec 16 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
详解JavaScript中Arguments对象用途
Aug 30 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 #Javascript
深入分析jQuery.one() 函数
Jun 03 #jQuery
layui实现显示数据表格、搜索和修改功能示例
Jun 03 #Javascript
微信小程序文章详情功能完整实例
Jun 03 #Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 #Javascript
微信小程序文章列表功能完整实例
Jun 03 #Javascript
Angular8 简单表单验证的实现示例
Jun 03 #Javascript
You might like
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
python使用turtle库绘制树
2018/06/25 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
Python中zip函数如何使用
2020/06/04 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
青年教师典范事迹材料
2014/01/31 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
财务整改报告范文
2014/11/05 职场文书
秋季运动会加油词
2015/07/18 职场文书
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB