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 相关文章推荐
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
php 表单数据的获取代码
2009/03/10 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
基于jQuery的图片剪切插件
2011/08/03 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
python导入模块交叉引用的方法
2019/01/19 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
建筑人员岗位职责
2013/12/25 职场文书
幼儿园新学期寄语
2014/01/18 职场文书
研发工程师岗位职责
2014/04/28 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
总经理致辞
2015/07/29 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫