vue js如何捕获按键输入后输入的字符

Question

所以我正在尝试捕获按键后或用户按下回车键后输入的字符。

我使用了这个包：npm i vue-keypress，但我不知道如何捕捉字符。你可以建议除此包之外的任何方法。

<script>
 export default {
    components: {
        Keypress: () => import('vue-keypress')
    },
    data(){
        return {
            enteredCode:'',
        }
    },
    methods:{
        CaptureKey(){
        console.log(this.enteredCode); 
        }   
    }
}
</script>
<template>
    <v-container>
        <Keypress key-event="keyup" v-model="enteredCode" :key-code="13" @success="CaptureKey()" />   
    </v-container>
</template>

如果可能的话，我真的不想使用输入框。

谢谢

Answer 1

也许可以使用类似的东西？

这会在不使用输入字段的情况下侦听按键事件，并在按下输入时将其存储到文本数据中。

<template>
  <div class="text">
    <label>Draft: Press enter when done.</label>
    <pre>{{ draft }}</pre>
    <label>Text:</label>
    <pre>{{ text }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      draft: "",
      text: "",
    };
  },
  methods: {
    onKeyup(event) {
      if (event.key === "Enter") {
        this.text = this.draft + "";
        this.draft = "";
      } else {
        this.draft += event.key;
      }
    },
  },
  mounted() {
    document.addEventListener("keyup", this.onKeyup);
  },
  beforeDestroy() {
    document.removeEventListener("keyup", this.onKeyup);
  },
};
</script>

演示

https://codesandbox.io/s/vue-text-input-without-input-field-d417j?file=/src/App.vue

vue js如何捕获按键输入后输入的字符

How to capture character entered after key enter vue js

vue.js

vuetify.js