java键盘监听事件代码_JavaScript监听键盘事件代码实现

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

监听方式

键盘事件往往是全局监听，设监听的函数为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的支持情况是不同的，下文会有关于提升兼容性的方法。

举个例子：

function keyboard(eve) {

msg1.textContent += eve.key;

msg2.textContent += eve.keyCode || eve.which;

//该方法可以提升代码的兼容性

}

document.onkeyup = keyboard;

input:

output:

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

let x = eve.keyCode || eve.which;

let key = String.fromCharCode(x);

想知道某个按键的Unicode码，可以查手册，也可以在控制台中试验。

简单点的可以用ASCII码来顶着 https://www.runoob.com/tags/html-ascii.html 。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

java键盘监听事件代码_JavaScript监听键盘事件代码实现相关推荐

java键盘监听wasd控制,基于数据分析定制一块好键盘
[作者: 0han] 首先推荐一个机械键盘品牌"WASD"(链接), 所有的机械轴都是cherry原厂的,他支持用户自定义每个键帽的颜色,先展示一张配色: 有没有nmd的既视感.. ...
java键盘监听keyadapter_JAVA 键盘监听当中，释放键盘并没有停止运动
package plane; import java.awt.Graphics; import java.awt.Image; import java.awt.event.KeyAdapter; im ...
android 键盘弹出监听,奇技淫巧之-Android监听键盘弹出与隐藏事件
CaptainAndroid.png 相信看到这个标题,大家都会潜意识觉得:Activity中没有可以复写的方法么?或者说,没有什么listener可以让我们使用么? 抱歉,真的没有,我们潜意识都是以 ...
键盘VK键值（java键盘监听）
键盘VK键值列表 /* Virtual Keys, Standard Set*/ VK_LBUTTON 0x01 VK_RBU ...
java键盘监听延迟_解决JAVA键盘监听的延迟现象以及八个方向的运动
首先解释一下键盘出现延迟的原因: 其实键盘为了用户体验,在按下一次按键之后,会有片刻的延迟,为什么会这样呢? 你想一下,当你打一个字母时,连着出来了好几个字母,你心里面的感受是怎么样的? 所以嘛,键盘 ...
java键盘监听wasd控制_dota2rpg自定义按键绑定及WASD移动的实现
本文的目的是在DOTA2自定义游戏中实现一个WASD控制的8方向移动,如果你想实现的是4方向的,稍微修改一点点代码也可以做到. 通过本文,你也可以了解到DOTA2自定义按键的流程. 本文的所有代码你都 ...
解决JAVA键盘监听的延迟现象以及八个方向的运动
首先解释一下键盘出现延迟的原因: 其实键盘为了用户体验,在按下一次按键之后,会有片刻的延迟,为什么会这样呢? 你想一下,当你打一个字母时,连着出来了好几个字母,你心里面的感受是怎么样的? 所以嘛,键盘 ...
react添加键盘事件（react-hook 监听键盘事件）
需求: 通过键盘的左右箭头按钮触发修改方框的位置实现基础数据 import React, { useState, useEffect } from 'react'; const ChangeBox ...
Java实现拼图小游戏（6）—— 移动图片（键盘监听实操练习）
移动图片一.前言二.步骤 1.让我们的类继承KeyListener接口 2.改写initData方法 3.实现向上移动 4.实现向下移动 5.实现向左移动 6.实现向右移动 7.改写initIma ...

java键盘监听事件代码_JavaScript监听键盘事件代码实现

java键盘监听事件代码_JavaScript监听键盘事件代码实现相关推荐

最新文章

热门文章