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 Eval 函数使用
Mar 23 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
javascript基本类型详解
Nov 28 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
浅谈React Event实现原理
Sep 20 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 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写的简易聊天室代码
2011/06/04 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
获取URL文件名后缀
2013/10/24 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
php四种定界符详解
2017/02/16 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
python下10个简单实例代码
2017/11/15 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
室内设计专业学生的自我评价分享
2013/11/27 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
单位工资证明范本
2015/06/12 职场文书
2016教师节感恩话语
2015/12/09 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
详解nginx location指令
2022/01/18 Servers