VueJ: @keydown, @keyup, 그리고 이것.$refs는 입력에서는 동작하지만 md-text area에서는 동작하지 않습니다.

VueJ: @keydown, @keyup, 그리고 이것.$refs는 입력에서는 동작하지만 md-text area에서는 동작하지 않습니다.

다음을 사용하여 기본 속도 입력 게임을 성공적으로 완료했습니다.vue.js'타이핑 박스'는...<input>모든 것이 잘 작동했습니다.그러나 사용자가 입력할 수 있는 긴 문장과 함께 게임에 더 많은 레벨을 추가했을 때, 나는 내 게임을 바꿀 필요성을 알게 되었습니다.<input>에 요소화하다.<md-textarea>- avue.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>

언급URL : https://stackoverflow.com/questions/42825408/vuejs-keydown-keyup-and-this-refs-works-with-input-but-not-with-md-textar