javascript - 한글 입력 후 엔터키로 이벤트 처리할 때 , 이벤트가 두 번 발생하는 경우.

말 그대로다. 

이전에는 같은 코드로 이런 일이 안 일어났던 것 같은데, 이상하긴 하다.

하여튼, 문제가 발생하면 해결해야 하는 것이 업業 이라, 놓아둘 수는 업는법.

반나절의 삽질 끝에 원인을 찾아 해결한다.

1. 현상.

javascript + jquery 로 keyUp 이벤트를 걸었는데,

영문 입력시에는 1번 일어나는 key up 이벤트가, 한글 입력시에는 2번 일어난다.

예를들어, 아래와 같이 코드를 구성.

<textarea id="text1" ></textarea>

...

<script ... >

...

$('#text1').keyup( function( event ){

if ( 13 == event.which ) // 사용자가 엔터 키를 입력.

{

...

}

});

...

</script>

흔하디 흔한 "입력 완료 후 엔터 검출" 코드다.

근데, 이게 왜인지는 모르겠는데, IE 에서는 

영문 입력시에는 기대한대로 key up 이벤트가 1번 일어나는데, 

한글 입력시에는 key up 이벤트가 2번 일어난다.

IE만 그러더라.

2. 해결.

나도 이런적은 처음이어서 ( 사실 이런 일이 발생할거라고는 생각도 안했다. ) 어찌할까 하다가, 

keyup 이벤트를 keypress 이벤트로 바꾸어봤다. 

그러니 한글, 영문 모두 1번만 이벤트가 일어나더라.

3. 추측.

아마도 한글 입력시에만 이벤트가 2번이니까, 혹시 utf-8 문자 변환 관련 내부 로직이 꼬이는 게 아닐까 싶다.

즉, 엔터를 ascii 로 처리할 때는 1byte 이니까 이벤트를 byte 당 1번 발생시켜서 문제가 없었는데, ( 글자 1개 = 1바이트 = 1이벤트 발생 )

한글 입력이 되면 전체 문자열이 utf-8 이 되지만, 이벤트 발생( firing ) 시킬 때 글자 1개를 n 바이트로 착각해서 변경에 문제가 생긴게 아닐까.

keypress 에서 문제가 없다는 건, 마지막 입력 문자를 처리하지 않으면 문제가 없다는 거니까.

뭐...생각해보면 이것도 이상하긴 하네.

어쨌던, 혹시 이런 일이 발생한 다른 사람들은 참고바람.

나도 이건 처음 겪는 일이다. 

[나도 모르겠다.]