如何捕获键输入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

也许像这样的东西能被利用？

它不使用输入字段侦听关键事件，并在按下enter键时将其存储到文本数据中。

<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