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控件的相对独立性
Sep 03 Javascript
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 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测试硬盘写入速度示例
2014/01/27 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
javscript对象原型的一些看法
2010/09/19 Javascript
JavaScript中的类继承
2010/11/25 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python中Collection的使用小技巧
2014/08/18 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
python实现的文件同步服务器实例
2015/06/02 Python
利用python获取Ping结果示例代码
2017/07/06 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
酷瑞网络科技面试题
2012/03/30 面试题
中专生的个人自我评价
2013/12/11 职场文书
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
幼儿园见习总结
2015/06/23 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
安全温馨提示语大全
2015/07/14 职场文书