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 相关文章推荐
$.format,jquery.format 使用说明
Jul 13 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
js自定义select下拉框美化特效
May 12 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
微信小程序自定义顶部组件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模块memcache和memcached区别分析
2011/06/14 PHP
yii分页组件用法实例分析
2015/12/28 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
php简单统计在线人数的方法
2016/05/10 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python实现计算倒数的方法
2015/07/11 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
python实现机器人行走效果
2018/01/29 Python
python flask中静态文件的管理方法
2018/03/20 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
Python实现按中文排序的方法示例
2018/04/25 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
Django--权限Permissions的例子
2019/08/28 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
ktv服务员岗位职责
2015/02/09 职场文书
党员年终个人总结
2015/02/14 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
检讨书怎么写?
2019/06/21 职场文书
总结几个非常实用的Python库
2021/06/26 Python
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python
Java完整实现记事本代码
2022/06/16 Java/Android