After successfully creating a basic speed typing game using vue.js, I encountered an issue when expanding the game to include multiple levels with longer sentences for users to type. This led me to realize the necessity of changing my <input> element to <md-textarea>, which is a vue.js component.
THE ISSUE:
The attributes that were functioning correctly with <input> are not behaving as expected with <md-textarea>:
@keyup="checkAnswer()"@keydown="keymonitor"@keydown.ctrl.86="noPaste"(to prevent paste viaCtrl+V)@keydown.shift.45="noPaste"(to prevent paste viaShift+Insert)ref="typeBox"(enables focusing on the element throughthis.$refs.typeBox[0].focus())
Please see the code snippets below for reference.
Could you assist me in debugging this issue? Any help would be greatly appreciated. Thank you.
NOTE: While an error may appear in the SO snippet feature, it does not exist in my development environment.
export default {
name: 'game',
data () {
return {
disabledKeys: ['ArrowLeft', 'Home']
}
},
methods: {
/**
* prevents pasting via 'Ctrl + V' (@keydown.ctrl.86) and 'Shift + Insert' (@keydown.shift.45)
*/
noPaste: function (event) {
event.preventDefault()
},
/**
* Monitors every single key input in the answer text box.
*
* Prevents using of disabled keys in the text input.
*/
keymonitor: function (event) {
if (this.disabledKeys.indexOf(event.key) >= 0) {
event.preventDefault()
}
}, /*END keymonitor*/
startTimer () {
this.timer.id = setInterval(this.updateTimer, 1000)
this.$nextTick(() => {
this.$refs.typeBox[0].focus()
})
this.game.status = 'in progress'
}, /*END startTimer*/
} /* END methods */
} /* END export default */<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<template>
<md-input-container md-flex="100">
<!-- this one is working -->
<input id="typeBox" autocomplete="off" placeholder="Type here..." ref="typeBox" v-model="answer" @keydown="keymonitor" @keydown.ctrl.86="noPaste" @keydown.shift.45="noPaste"/>
<!-- this one is not working -->
<md-textarea id="typeBox" autocomplete="off" placeholder="Type here..." ref="typeBox" v-model="answer" @keydown="keymonitor" @keydown.ctrl.86="noPaste" @keydown.shift.45="noPaste"></md-textarea>
</md-input-container>
</template>