Javascript VueJS：@keydown、@keyup 和 this.$refs 对输入有效，但对 md-textarea 无效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42825408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
VueJS: @keydown, @keyup, and this.$refs works with input, but not with md-textarea
提问by ITWitch
I have successfully completed a basic speed typing game using vue.js. For the "typing box", I used <input>, and everything worked fine. However, when I added more levels to my game, with longer sentences for the user to type, I have identified the need to change my <input>element into <md-textarea>- a vue.jscomponent.
我已经成功地完成了一个基本的快速打字游戏vue.js。对于“输入框”，我使用了<input>，并且一切正常。然而，当我在游戏中添加更多关卡，让用户输入更长的句子时，我发现需要将我的<input>元素更改为<md-textarea>- 一个vue.js组件。
THE PROBLEM:
问题：
The following attributes that were working fine with <input>won't work as expected with <md-textarea>:
以下正常工作的属性<input>将无法按预期工作<md-textarea>：
@keyup="checkAnswer()"@keydown="keymonitor"@keydown.ctrl.86="noPaste"(prevents paste viaCtrl+V)@keydown.shift.45="noPaste"(prevents paste viaShift+Insert)ref="typeBox"(allows focusing on the element viathis.$refs.typeBox[0].focus())
@keyup="checkAnswer()"@keydown="keymonitor"@keydown.ctrl.86="noPaste"（防止粘贴通过Ctrl+V）@keydown.shift.45="noPaste"（防止粘贴通过Shift+Insert）ref="typeBox"（允许通过 关注元素this.$refs.typeBox[0].focus()）
Please refer to the codes below.
请参考以下代码。
Am I missing anything? Please help me debug this. Thank you.
我错过了什么吗？请帮我调试这个。谢谢你。
NOTE:I know it throws an error here in SO snippet feature, but that error does not exist in my development environment.
注意：我知道它会在 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>回答by thanksd
You can bind functions to the native events of the root element of a component by using the .nativemodifier. See the documentation here.
您可以使用.native修饰符将函数绑定到组件根元素的本机事件。请参阅此处的文档。
In your case, you can add native event handlers to the <md-textarea>component like so:
在您的情况下，您可以将本机事件处理程序添加到<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>
