VueJS：@keydown、@keyup 和 this.$refs 适用于输入，但不适用于 md-textarea答案

【问题标题】：VueJS: @keydown, @keyup, and this.$refs works with input, but not with md-textareaVueJS：@keydown、@keyup 和 this.$refs 适用于输入，但不适用于 md-textarea
【发布时间】：2017-08-07 02:46:29
【问题描述】：

我已经使用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 sn-p 功能中引发错误，但我的开发环境中不存在该错误。

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>

【问题讨论】：

问题是<md-textarea> 不会发出这些事件（keydown）。据我所知，它只发出change 和input。如果你真的需要 keydown 事件支持，你可能需要简单地使用 <textarea> 并自己设置样式
笨蛋，我怎么没想到？！ ...尤其是在使用<textarea> 时完全没有样式问题时。非常感谢您指出这一点。您可以发表您的评论作为答案，以便我投票吗？我把这个问题留在这里，以防万一其他人为<md-textarea> 自己找到解决方案。

标签： javascript vue.js vuejs2 vue-component vue-material

【解决方案1】：

您可以使用.native 修饰符将函数绑定到组件根元素的本机事件。请参阅文档here。

在您的情况下，您可以将本机事件处理程序添加到 <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>

【讨论】：