Skip to content

[vue] vue如何监听键盘事件? #263

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] vue如何监听键盘事件?

Activity

wenyejie

wenyejie commented on Jun 17, 2019

@wenyejie

那要看你怎么监听了, 比如
@keyup.enter,
或者直接全局监听

CaoRuimiao

CaoRuimiao commented on Jul 14, 2019

@CaoRuimiao

回车 @keyup.enter.native

canwdev

canwdev commented on Feb 23, 2020

@canwdev
  1. @keyup. 方法

    <template>
      <input ref="myInput" type="text" value="hello world" autofocus @keyup.enter="handleKey">
    </template>
    
    <script>
      export default {
        methods: {
          handleKey(e) {
            console.log(e)
          }
        }
      }
    </script>
  2. addEventListener

    <script>
      export default {
        mounted() {
          document.addEventListener('keyup', this.handleKey)
        },
        beforeDestroy() {
          document.removeEventListener('keyup', this.handleKey)
        },
        methods: {
          handleKey(e) {
            console.log(e)
          }
        }
      }
    </script>
crush2020

crush2020 commented on Feb 2, 2021

@crush2020

v-on:keyup后面接修饰符,代表你想监听的按键

Cai-zhiji

Cai-zhiji commented on Jul 6, 2023

@Cai-zhiji

使用事件修饰符

@keydown.enter:监听 Enter 键按下事件。
@keydown.esc:监听 Esc 键按下事件。
@keydown.tab:监听 Tab 键按下事件。



# 
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @wenyejie@haizhilin2013@canwdev@CaoRuimiao@crush2020

        Issue actions

          [vue] vue如何监听键盘事件? · Issue #263 · haizlin/fe-interview