모바일웹에서 휴대폰 키보드 이벤트

회사에서 모바일 웹을 사용하여 서비스를 이용하는 프로젝트를 진행하고 있습니다.

거의 마무리가 되가는 시점에, 문의사항을 하나 받았는데...

기본 키패드에서 '이동' 버튼을 누르면 아무 이벤트도 없고 페이지가 리로드 된다는 이슈였습니다..

사실 '다음'이라는 임의의 버튼을 만들어 놓았고... 저 키패드에 대한 이슈는 생각도 못 했습니다.

찾아 보니.. 자바스크립트로 사용자의 키 입력을 체크하여 이벤트를 처리할 수 있다는 것을 알았습니다.

$("#number").bind('keydown', function (e) {
    if(e.keyCode === 13){
        nextMethod();
    }
});   

keydown은 유저가 키보드를 누르는 순간 이벤트가 실행됩니다.

그리고 저기 보이는 e.keyCode는 ASCII 코드에 기반한 코드입니다.

그중 13은 Enter를 의미합니다. Back Space, Tab, Esc 등 다양한 입력 키보드 값 들이 있습니다.

이렇게 소스를 추가하고, 테스트를 해봤는데 정상적으로 nextMethod()로 넘어가서 ajax를 통해 응답 값 까지 받아왔지만...

왜인지 모르게... 페이지가 다시 리로드 됐습니다... 원래 제 예상 시나리오대로라면 팝업창이 나타나야 되는데... 깨끗한 화면으로....

다시 부랴부랴 찾아보니... 저와 비슷한 현상을 겪는 분들이 많았기 때문에 문제를 해결할 수 있었습니다.

제 소스 코드 같은 경우는. submit을 위한 Form tag는 아니지만.. 이러한 Form 태그를 갖추고 있습니다.

<form name="tistoryForm" id="tistoryForm">

그리고 키보드를 입력하여 값을 입력받는 <input type='text' id='number'/>가 있는데, 이러한 input box안에서 enter를 치게 되면

자동으로 submit이 된다는 것 이었습니다. 흠...

<form name="tistoryForm" id="tistoryForm" onsubmit="return false;">

Form Tag 안에 onsubmit="return false;"를 입력하면 이러한 submit을 방지할 수 있습니다.

저 같은 경우는 ajax를 이용하기 때문에 Form tag안에 return false를 입력했지만

keyboard enter시점이 아니라, 다른 시점에 submit을 해야 하는 경우가 있을 수 있습니다.

그럴 때는 자바 스크립트를 이용하여 submit을 하게 되면 onsubmit="return false;"과 상관없이 submit

기능을 이용할 수 있습니다.