我已经成功完成了一个基本的快速打字游戏,使用vue.js
。对于"打字框",我使用了<input>
,一切正常。但是,当我向游戏添加更多关卡,并为用户提供更长的句子时,我已经确定需要将<input>
元素更改为<md-textarea>
- 一个vue.js
组件。
问题:
以下在<input>
上工作正常的属性在<md-textarea>
上无法按预期工作:
-
@keyup="checkAnswer()"
-
@keydown="keymonitor"
-
@keydown.ctrl.86="noPaste"
(防止通过Ctrl+V
粘贴( -
@keydown.shift.45="noPaste"
(防止粘贴通过Shift+Insert
( -
ref="typeBox"
(允许通过this.$refs.typeBox[0].focus()
聚焦在元素上(
请参考以下代码。
我错过了什么吗?请帮我调试这个。谢谢。
注意:我知道它在SO代码片段功能中抛出错误,但该错误在我的开发环境中不存在。
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>
可以使用 .native
修饰符将函数绑定到组件根元素的本机事件。请参阅此处的文档。
在您的情况下,您可以向<md-textarea>
组件添加本机事件处理程序,如下所示:
<md-textarea
id="typeBox"
autocomplete="off"
placeholder="Type here..."
ref="typeBox"
v-model="answer"
@keydown.native="keymonitor"
@keydown.native.ctrl.86="noPaste"
@keydown.native.shift.45="noPaste"
></md-textarea>