• 浏览器绑定快捷键KeyboardEvent

    文章目录

    一、文章参考

    1. KeyboardEvent

    二、问题说明

    在项目中默认地图是聚合显示，地图层级逐级提高，最终能查找到目标，由于地图数据较多，查找不准确，因此，希望添加一个快捷能快速查找到目标点位。

    三、快速入门

    给全局添加快捷键，则要求把事件绑定到document上。

    DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <body>body>
  <script>
    // 响应 key 事件触发的方法
    function hotKeyHandler(keyboardEvent) {
      console.log(keyboardEvent);
      if (keyboardEvent.ctrlKey && keyboardEvent.code === "KeyQ") {
        alert('触发了 ctrl + q 的快捷键！')
      } else {
        console.log('触发 的快捷键！' + keyboardEvent.code)
      }
      keyboardEvent.preventDefault();
    }
    window.onload = function () {
      document.addEventListener('keydown', hotKeyHandler);
    };
  script>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    注意：**keyboardEvent.preventDefault();**如果执行，则会继续执行相同快捷键的其他操作，比如F5刷新和F11全屏展示等；如果不执行，则会继续响应默认的快捷键事件。

    四、 KeyboardEvent 介绍

    KeyboardEvent 对象描述了用户与键盘的交互。 每个事件都描述了用户与一个按键（或一个按键和修饰键的组合）的单个交互；事件类型keydown， keypress 与 keyup 用于识别不同的键盘活动类型。

    属性

    KeyboardEvent.altKey 只读

    返回一个 Boolean，如果按键事件产生时，Alt（OS X 中是 Option 或⌥）键被按下，则该值为 true 。

    KeyboardEvent.ctrlKey 只读

    返回一个 Boolean，如果按键事件发生时 Ctrl 键被按下，则该值为 true 。

    KeyboardEvent.metaKey 只读

    Returns a Boolean that is true if the Meta key (on Mac keyboards, the ⌘ Command key; on Windows keyboards, the Windows key (⊞)) was active when the key event was generated.

    KeyboardEvent.shiftKey 只读

    Returns a Boolean that is true if the Shift key was active when the key event was generated.

    KeyboardEventInit 字典，有以下几种值：

    五、 Vue 执行组合快捷键

    5.1 给全局添加 快捷键

    DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script src="./vue.min.js">script>
  head>
  <body>
    <div id="app">div>
  body>

  <script>
    new Vue({
      el: '#app',
      mounted() {
        document.addEventListener('keydown', this.hotKeyHandler);
      },
      beforeDestroy() {
        document.removeEventListener('keydown', this.hotKeyHandler);
      },
      methods: {
        hotKeyHandler(keyboardEvent) {
          // 是地区层级 并且 是概览模式，用户输入 ctrl + p  快捷键，才会触发
          if (keyboardEvent.ctrlKey && keyboardEvent.code === 'KeyQ') {
            alert('触发了 ctrl + q 事件');
          }
          // 阻止其他默认事件的处理，比如F5刷新 和 F11全屏都会失效
          // keyboardEvent.preventDefault();
        },
      },
    });
  script>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    备注： keyboardEvent.preventDefault();阻止其他默认事件的处理，比如F5刷新 和 F11全屏都会失效

    5.2 input表单控件添加快捷键

    DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script src="./vue.min.js">script>
  head>
  <body>
    <div id="app">
      <div>
        <input v-model="name" @keyup.enter="nativeEnter"/>
      div>
      <div>
        <input v-model="address" @keyup="altEnterActioin" />
      div>
    div>
  body>
  
  <script>
    new Vue({
      el: '#app',
      data () {
        return {
          name: '名字',
          address: '地址'
        }
      },
      methods: {
        nativeEnter () {
          alert('name' + this.name)
        },
        altEnterActioin (keyboardEvent) {
          console.log(keyboardEvent)
          if (keyboardEvent.ctrlKey && keyboardEvent.keyCode === 13) {
            alert("触发了 ctrl + enter 事件" )
          }
          // 阻止其他默认事件的处理，比如F5刷新 和 F11全屏都会失效
          keyboardEvent.preventDefault()
        }
      },
    })
  script>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
  • 相关阅读:
    jupyter matplotlib 中文报错/乱码
    vulfocus——solr远程命令执行(CVE-2019-17558)
    数据库学习之基础内容
    optee默认安全配置
    基于神经网络的自动驾驶,人工智能在无人驾驶
    DateUtil工具类记录
    透过生产车间看板洞悉生产制造企业的生产关键指标
    聚焦天线组件如何提升无线物联网设备的功率效率
    linux基础IO
    HCIA网络基础9-VRP文件系统管理
  • 原文地址：https://blog.csdn.net/hbiao68/article/details/126765695