jQuery keyPress Event에 대하여

jQuery에는 키보드 관련 액션을 몇가지 제공하고 있다

- keyDown   ( 키를 눌럿을 경우 반응, 1회성 )

- KeyUp      (  눌린 키가 되돌아 왔을 경우 반응, 1회성 )

- keyPress    ( 키를 눌럿을 경우 반응, 지속성)

보통 자주 사용하는,  떠올리는 방법은 위 3가지정도 될 것 이라 생각한다. (뭐 본인은.. )

어떤걸 사용해야 할지는 상황에 따라 판단하기 나름이지만,

주의해야할 사항이 있다.

웹 프로그래밍을 하면 가장 자주 떠오르는 문제중하나가 바로 크로스브라우징 이다.

크로스 브라우징이란 브라우저별 대응이란 의미이며 이건 우리가 인터넷을 즐김에 있어 사용하는 브라우저들의 종류가 다양하기 때문에

각각 브라우저에서 의도한 동작이 제대로 반응하는지를 체크하는 대응이라 볼 수 있다.

HTML 이라는건 규격이 잘 정해져 있으나, javascript에 대한 면에선 브라우저가 서로각자의 렌더링 엔진을 사용하고 있기 때문에
동작이 다르게 나타날 가능성이 크다.

필자의 회사에선 2016년 9월 현재
Internet Explorer 9 ~

Microsoft Edge

Chrome

FireFox

Safari

이렇게 5개 브라우저를 대응중 브라우저로 설정해두고 있으며, IE9 이외엔  모드 최신버전만 대응한다.

다시 본론으로 넘어가서 keyPress, keyDown, keyUp 각각의 event를 처리할때 보통

$("#element_di").on('keyPress', function(event){
    var keyType = event.which;
    var keyType = event.keyCode;
}
 
 

이런식으로 어떤키가 입력이 되었는지 확인하고자 할 것이다.

보통의 경우엔 which나 keyCode나 같은 값이 입력되므로 어느것을 사용해도 상관없으나,

KeyPress를 사용할 경우에만!!! Chrome 의 경우엔!! 반응이없다!!

즉 undefined 가 되버린다는 것이며 which, keyCode 모두 반응하지 않는다.

재미있는건 이게 특정키에 한해서만의 이야기이며, 일반 숫자키나, 영문키는 모두 상관없이 잘 된다.

특정키는 바로 home, end, insert,delete, pageup, pagedown, 방향키

이다. 이녀석들은 누르고 있든, 말든 아무런 반응이 없다.

그리고 또 문제가 되는건 바로 FireFox에서의 움직임이다.

FireFox는 더 복잡한데.

shift를 누른채 입력하는 특수문자 ( !@#$%... ) 의 경우 KeyCode 는 0으로 고정이며

which 값이 반응한다.

그러고 위에 언급한 home, end, inert 의경우엔 반대로 which가 0으로 고정이며 keyCode만이 반응한다.

이거참 ..... 어쩌잔거지..

거기에다 #의 경우 which 값이 35이다 그리고 end 의 경우 which 값이 35이다

끽하다 실수하면 같은 움직임이 되어 버린다...

제어를 잘해줘야한다.

그나마  Chrome 의 경우엔which, keyCode 둘다 반응이 없기때문에 본연의 동작을 다 하고있지만

FireFox의 경우 상당히 까다롭기 때문에 다 찾아 지정해줘야만 움직인다.

keycode, which 확인용, 테스트용 사이트

http://noritersand.tistory.com/224

ps. 매번 크로스 브라우징 대응할때마다 귀찮아 죽것네...