JavaScript如何实现监听键盘输入和鼠标监点击_js监听鼠标点击事件

5星 · 超过95%的资源 150 浏览量更新于2023-03-03 评论收藏 140KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

JavaScript如何实现监听键盘输入和鼠标监点击如何实现监听键盘输入和鼠标监点击

实际应用中,我们会遇到监听按键输入和鼠标点击事件,在这里我们进行对鼠标和键盘事件的总结.

KeyboardEvent

KeyboardEvent 对象描述了键盘的交互方式。每个事件都描述了一个按键（Each event describes a key）；事件类型keydown， keypress 与 keyup 可以确定是哪种事件在活动。

KeyboardEvent 表示刚刚发生在按键上的事情。当你需要处理文本输入的时候，使用 HTML5 input 事件代替。例如，用户使用手持系统如平板电脑输入时，按键事件可能不会触发。

方法方法

本接口同样会继承对象父代的方法， UIEvent 和 Event。

KeyboardEvent.getModifierState()返回一个 Boolean，表示在事件创建时，修改键如Alt ， Shift， Ctrl， Meta等是否按下。

KeyboardEvent.initKeyEvent()初始化一个 KeyboardEvent 对象。现在的标准方式是使用 KeyboardEvent() 构造器。

KeyboardEvent.initKeyboardEvent() 初始化一个 KeyboardEvent 对象。现在的标准方式是使用 KeyboardEvent() 构造器。

介绍下我们常用的一些属性：

KeyboardEvent.key

KeyboardEvent.code

KeyboardEvent.ctrlKey

KeyboardEvent.shiftKey

KeyboardEvent.altKey

KeyboardEvent.metaKey

会用到（譬如：Alt + a）。大家看到 meta 会疑惑这个是哪个键？在 Mac 平台上指的是 command 键（⌘），而在 Windows 平台指的是 windows 键（⊞）。但是不是所有 Windows 电脑键盘都有 ⊞ 这

个键的。接下来我们介绍下最重要的两个属性 key 和 code。

KeyboardEvent.key

如果你按下的按钮所代表的是一个可打印的字符（printed representation），那么这个 key 的值就是这个字符（譬如：a、Enter、Shift、CapsLock、Backspace）。。

KeyboardEvent.code

这个值比较诡异，它表示你按了键盘上的哪个按键。你按 a，code 的值是 KeyA，你按左边的 Shift，code 的值是 ShiftLeft。什么意思呢？就是他表示你按的按键在键盘的哪个位置。这里就有趣了，因为

不同语言的键盘同一个键代表的字符可能不同，但是位置是相同的。打个比方：KeyQ 代表的是我们普通键盘q按键。但是呢 Dvorak 键盘q这个位置的按钮代表的不是 q，而是’。所以如果你按同一个按

钮，key 的值可能不同，code 的值会相同。

KeyboardEvent.keyCode 只读只读

返回一个表示系统和实现相关的数字代码的 Number，用于标识按键的未修改值。

了解了上面属性,我们就可以进行使用代码的方式实时获取输入的键值

<!DOCTYPE html>

<head>

<title>键盘事件监听</title>

<style>

* {

margin: 0;

padding: 0;

}

#container {

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

padding-top: 20px;

}

table,

table tr th,

table tr td {

border: 1px solid #000;

}

table {

min-height: 25px;

line-height: 25px;

text-align: center;

border-collapse: collapse;

padding: 2px;

}

th {

width: 150px;

}

</style>

window.onload = function () {

const key = document.getElementById('key');

const keyCode = document.getElementById('keyCode');

const code = document.getElementById('code');

const ctrlKey = document.getElementById('ctrlKey');

const metaKey = document.getElementById('metaKey');

const shiftKey = document.getElementById('shiftKey');

const altKey = document.getElementById('altKey');

const combineKey = document.getElementById('combineKey');

document.onkeydown = function(event) {

var e = event || window.event || arguments.callee.caller.arguments[0];

e.preventDefault(); //阻止默认事件

// 设置获取的值

key.innerHTML = e.key;

keyCode.innerHTML = e.keyCode;

code.innerHTML = e.code;

ctrlKey.innerHTML = e.ctrlKey;

metaKey.innerHTML = e.metaKey;

shiftKey.innerHTML = e.shiftKey;

altKey.innerHTML = e.altKey;

if (e.altKey || e.shiftKey || e.metaKey || e.ctrlKey) {

let result = '';

if (e.altKey) {

result = 'Alt';

} else if (e.shiftKey) {

result = 'Shift';

} else if (e.metaKey) {

result = 'Meta';

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

李诗旸

2023-06-20

文章篇幅较短，适合时间紧张的开发者抽空学习。

weixin_38603259

粉丝: 5
资源: 923

会员权益专享

JavaScript如何实现监听键盘输入和鼠标监点击

评论10

会员权益专享

最新资源

JavaScript如何实现监听键盘输入和鼠标监点击

评论10

使用JS监听键盘按下事件（keydown event）

js监听键盘事件示例代码

js 前端鼠标拖动事件实例

javascript实现软键盘输入，兼容多种浏览器，测试通过

js不能监听键盘输入,点一下就能监听了

SpringBoot+vue+elementUI如何用JavaScript实现模拟鼠标点击事件来实现点击按钮一次实现点击按钮两次

js监听键盘输入怎么写

html鼠标移除事件监听,Javascript：DOM事件（监听鼠标点击/释放，鼠标悬停/离开等）...

js监听键盘回车键输入怎么写

SpringBoot+vue+elementUI如何用JavaScript实现模拟鼠标点击事件来实现鼠标点击按钮一次相当于鼠标点击按钮两次的效果

javascript实现监听表单的提交事件

鼠标和键盘的控制，鼠标监听事件键盘监听事件

基于静态页面，写一段代码实现以下效果：轮播图，下拉菜单，简易留言板，简易计算器，动态时钟，Tab切换，悬浮提示，图片放大镜，弹出提示框，鼠标悬停变色

js监听鼠标点击事件

移动端怎么实现点击input弹出键盘输入

监听键盘的代码

css禁止鼠标点击次数

如何利用Javascript实现鼠标停顿改变功能

html5鼠标事件监听,HTML5 Canvas鼠标与键盘事件

会员权益专享

最新资源