How to capture character entered after key enter vue js-CodePudding

So am trying to capture the character entered after keypressed or after the user pressed enter key.

I used this package: npm i vue-keypress, but i could not figure it out how to capture the characters. you can suggest any method other that this package.

<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>

I really don't want to use input field if possible.

thanks

CodePudding user response：

Maybe something like this could be used?

This listens for key events without using an input field and stores it into text data when enter has been pressed.

<template>
  <div >
    <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>

Demo

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