vue 키보드 이벤트를 처리할때, input외 태그에서 실행되게하려면?

# 먼저 vue에서 key이벤트는 아래 블로그를 참조하면 된다.

https://ux.stories.pe.kr/119

Vue.js의 이벤트 사용 방법 정리

 

 

 

# 문제는 키 이벤트가 input 태그에서만 실행된다는 점!

    <input
      type="text"
      @keyup.left="key_press('keyleft')"
      @keyup.right="key_press('keyright')"
    />

키이벤트 정리는 저 위에 블로그를 보면 되고..

암튼 left키를 누르거나 .right 키를 누르면 연결된 이벤트가 실행된다는 점인데

조건이 인풋태그가 활성화 될때만 이라는점..

 

 

# 해결방법?

자스에서 dom으로 만지면 된다. 

  mounted() {
    document.addEventListener("keydown", this.key_press);
  },

키다운 이벤트시 현재 컴포넌트의 key_press함수가 실행된다.

 

 

+ 참조 stack overflow

https://stackoverflow.com/questions/68318351/vue-keydown-even-only-firing-when-elements-are-active

vue keydown even only firing when elements are active