grep

Engineering

Firefox 한글 조합시에 'keydown' 이벤트 발생 안하는 문제 해결방법

NHN

2015년 11월 30일

원문에서 보기 ↗

firefox-logo.jpg

파이어폭스에서는 input박스에서 한글 조합 중일 때에는 'keydown' 이벤트가 발생하지 않습니다. (참고링크)

그래서 다른 방법을 이용해야 자동완성기능을 만들 수 있습니다.

그 방법이 'keypress'이벤트를 이용하는 것입니다.

element.bind("keypress", function (event) {
	var keyCode = event.which || event.keyCode;
		if(keyCode === 13 || keyCode === 9) { // 13: enter, 9: tab
	// code
	}
}

제 경우에는 angular-js의 ui-bootstrap의 라이브러리를 사용했고, 이 라이브러리는 keydown이벤트만 바인딩이 되어있어서 문제가 있었습니다.

그래서 keypress 이벤트가 호출될 때에 해당 라이브러리의 이벤트를 발생시켜서 해결했습니다.


또한 이 코드는 Firefox에서만 실행되어야 합니다.(다른 브라우저에서 이상작동할 수 있습니다.)

그래서 아래와 같이 firefox에서만 실행되게 하였습니다.

if(isFireFox()) {
	element.bind("keypress", function (event) {
		var keyCode = event.which || event.keyCode;
		if(keyCode === 13 || keyCode === 9) { // 13: enter, 9: tab
		// code
		}
	}
}