[Vue.js] keyup, keydown, keypress 사용법 및 예제

이번엔 이벤트 핸들링 기능 중 하나인 key 시리즈에 대하여 설명하겠다.

key 시리즈도 너무나 단순하고 간단해서 크게 설명할 것이 없으니 간단하게 코드 사용과 결과를 설명하고 주의점 및 해결방안을 설명하겠다.

---

1. keyup

<template>
  <div>
    <input type="text" v-model="input" @keyup="keyHandle()">
    <div>
      입력결과 : {{this.result}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      result: '',
      input:''
    }
  },
  methods:{
    keyHandle(){
      this.result = this.input
    }
  },
}
</script>

 

실행결과

설명할게 크게 없다. key를 눌렀다가 떼면 keyHandle() 함수가 실행되어 변수 result에 입력값을 넣어 데이터 바인딩 한 코드이다.

 

---

2. keydown

<template>
  <div>
    <input type="text" v-model="input" @keydown="keyHandle()">
    <div>
      입력결과 : {{this.result}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      result: '',
      input:''
    }
  },
  methods:{
    keyHandle(){
      this.result = this.input
    }
  },
}
</script>

 

실행결과

이번엔 key를 눌렀을 시 동작하는 함수이다.

하지만 실행결과를 보면 입력칸엔 keydown을 입력했지만 결과는 마지막 글자가 빠져서 나왔다.

이 부분은 맨 하단 주의점 설명 시 언급하겠다.

 

---

3. keypress

<template>
  <div>
    <input type="text" v-model="input" @keypress="keyHandle()">
    <div>
      입력결과 : {{this.result}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      result: '',
      input:''
    }
  },
  methods:{
    keyHandle(){
      this.result = this.input
    }
  },
}
</script>

 

실행결과

이 keypress 또한 키를 눌렀을 시 동작하는 함수이다.

이번에도 입력칸에 keypress를 입력했지만 결과는 한글자가 빠져있다.

keydown과 똑같지만 약간의 차이가 있으므로 하단 주의점 설명할때 차이점을 설명하겠다.

 

SMALL

---

※ key 시리즈 주의점

 

위에서 실행 결과를 봐서 알듯 key 시리즈 마다 주의점과 특징이 있다.

 

1. 영문 입력 시 바로 나타나는 동작은 keyup만 가능하다(한글은 전부 한박자 늦게 나타난다)

위 실행결과 같이 입력 하자마자 바로 나타나는 동작은 keyup만 가능하다.

하지만 한글은 전부 한박자 늦게 나타난다. 그 이유는 한글은 글자 조합이 필요해서인데 좀 더 전문적으로 말하자면 IME가 필요한 언어이기 때문이다.

IME란 중국어,한국어,일본어와 같이 키보드 자판 글자 수 보다 많은 수의 문자를 계산하거나 조합하여 입력해주는 기능이다.

 

2. 한글 입력은 keyup, keydown만 가능하다

keypress는 한글 입력 시 값이 들어가지 않는다. 좀 더 정확하게 얘기하자면 입력시 값이 들어가지 않지만 Enter를 누르면 값이 입력된다.

input을 사용할때는 대부분 입력값이 눈에 보여야지 제대로 입력되고 있는지 확인할 수 있지만 Enter를 눌러야 값이 입력된다면 사용취지에 맞지 않을 수 있다.

 

3. keyup, keydown은 한글 + Enter 입력 시 중복 적용이 된다

실행결과

위 실행결과는 'ㅁ'을 누르고 Enter를 누르면 나타나는 동작을 console 찍어서 확인해본 결과이다.

keyup, keydown은 위와 같이 'ㅁ' 한글자만 입력하고 Enter를 눌렀을 시 중복적용이 되는것을 볼 수 있다.

하지만 keypress는 위에 설명했듯 입력할때는 동작을 안하다가 Enter를 눌렀을때 동작하기 때문에 중복없이 한번만 찍게된다.

 

---

※ key 시리즈 주의점 해결 방안

위에 있는 주의점들을 모두 통합해서 해결할 수 있는 방법이 있다.

바로 key 시리즈를 사용하지 않고 @input 기능을 사용하는 것이다.

<template>
  <div>
    <input type="text" @input="keyHandle" >
    <div>
      입력결과 : {{this.result}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      result: '',
      input:'',
    }
  },
  methods:{
    keyHandle(e){
      this.result = e.target.value
    },
  },
  watch:{

  }
}
</script>

실행결과

위 내용은 @input을 사용하여 짠 코드이다.

실행 결과를 보면 특수문자, 영문, 한글도 입력함과 동시에 결과값에 나타난다. 게다가 데이터 중복도 없이 정상적으로 동작한다.

key 시리즈의 모든 단점을 한번에 해결하며 간단하게 코드를 짤 수 있는 @input으로 넘어가야만 한다.