Keyup, Keydown 이벤트가 2번씩 호출 될 때 해결법

input에 keydown의 enter를 인식하여 특정 function을 호출하도록 지정해두었는데

자꾸 2번씩 동작하여 찾아보다가 메모합니다.

 

1. Keypress 사용하기

정말 간단한 방법이며, 쉬운 방법입니다.

하지만, 잘못 사용한다면 사용자가 엔터키를 꾸욱 누른다면

이벤트가 무한 호출되므로 주의해야합니다.

 

2. isComposing으로 확인하기

검색을 하다보니 찾게 된 친구이다.

keyboard 이벤트에 관련하여 event를 Parameter로 찍어보면

isComposing이 처음엔 true, 두 번째엔 false로 찍힐 것입니다.

 

영어로 입력시엔 발생하지 않는 이유가 여기에 있습니다.

 

한글로 입력시에는 글자를 조합하는 시간이 필요합니다.

그 컴포지션을 체크해주는 값이 isComposing입니다.

 

다만 콘솔로 이벤트를 찍어보라고 말씀드렸던 이유는

블로그에는 대부분 "e.nativeEvent.isComposing" 형태로 사용을 하였지만

Vue3 + Vite를 사용하는 제 환경에서는 e.isComposing으로 사용되었습니다.

 

간단한 사용법

document.querySelector('#div').addEventListener('keydown', keydownEvent)

function keydownEvent(e) {
	if (e.isComposing) return
	// 사용할 이벤트 작성
}

저는 vue에서 @keydown.enter="keydownEvent" 형태로 사용하다가 정리한 상태여서

너무 간단하거나 오타가 있을 수 있습니다