How to capture character entered after key enter vue js
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
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 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>
Demo
https://codesandbox.io/s/vue-text-input-without-input-field-d417j?file=/src/App.vue