js: 监听键盘按键事件KeyboardEvent

简介: js: 监听键盘按键事件KeyboardEvent

文档

事件类型

  • keydown
  • keypress
  • keyup
属性 类型 windows Mac OS
altKey Boolean Alt Option、⌥
ctrlKey Boolean Ctrl control、^
shiftKey Boolean shift shift
metaKey Boolean - Command、⌘
key String - -
keyCode (Deprecated) String - -

代码示例

<div id="text"></div>
<script>
  function eventHandler(event) {
    console.log(event);
    let data = {
      code: event.code,
      key: event.key,
      keyCode: event.keyCode,
      altKey: event.altKey,
      shiftKey: event.shiftKey,
      ctrlKey: event.ctrlKey,
      metaKey: event.metaKey,
    };
    let list = [];
    for (let [key, value] of Object.entries(data)) {
      list.push(`<li>${key}: ${value}</li>`);
    }
    document.querySelector("#text").innerHTML = list.join("");
  }
  document.addEventListener("keydown", this.eventHandler.bind(this));
</script>

在线体验:https://github.com/mouday/front-end-demo/EventListener-keydown.html


相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
1月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
33 2
|
2月前
|
JavaScript
在 Vue.js 中使用 watch 来监听对象属性的变化
在 Vue.js 中使用 watch 来监听对象属性的变化
|
30天前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
44 6
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
23 5
|
2月前
|
监控 JavaScript 前端开发
|
1月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
97 0
|
1月前
|
前端开发 JavaScript 安全
前端JS实现密码校验键盘横竖、26字母、相同字母、相同数字、密码包含用户名、数字 字母不能连续 不能相同三个、不能横向 竖向 连续三个 包含字符、不能有中文符号
该 JavaScript 代码实现了一个严格的密码校验功能,确保密码满足多种安全要求,包括长度、字符类型、不包含中文及特殊字符、不与用户名相似等。通过多个辅助函数,如 `validateFormat` 检查密码格式,`isHasChinaCharFun` 检测中文符号,`getCharAll` 生成键盘组合,以及 `checkPasswordFun` 综合验证密码的有效性和安全性。此工具对于提高用户账户的安全性非常有用。
28 0
|
1月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
52 0
|
1月前
|
JavaScript 前端开发 API
JavaScript全屏,监听页面是否全屏
JavaScript全屏,监听页面是否全屏
57 0