我已经使用 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
将函数绑定(bind)到组件根元素的 native 事件。修饰符。请参阅文档 here .
在您的情况下,您可以将 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>
关于javascript - VueJS : @keydown, @keyup 和 this.$refs 适用于输入,但不适用于 md-textarea,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42825408/