자바스크립트로 모바일 키패드 열기

발생일: 2012.03.20

문제:
요새 모바일 프로젝트를 진행하고 있는데,
textarea에 포커스를 주는 동시에 키패드를 뿅~하고 나타나게 하는 데서 어려움을 겪은 적이 있다.

 '쓰기' 버튼을 누르면 textarea가 있는 곳으로 애니메이팅 되어 이동한 후,
textarea에 포커스를 주도록 하는 스펙이다.

이상하게도, textarea에 포커스가 들어가긴 하는데, 키패드가 열리지 않는다.
원인이 뭘까?

모바일 사파리에서 발생한다.


해결책:
모바일 사파리에서는, 사용자 이벤에 의해서만 키패드를 열 수 있다.

스크립트만으로는 키패드를 열 수 없고,
다만, 사용자 이벤트 함수 실행 범위 내에서는 가능하다.


예를 들어,
  onClickButton: function (e) { // 클릭 이벤트 핸들러라 가정한다.
    textarea.focus(); // 원하는 textarea의 포커스 이벤트를 호출하면 키패드가 열린다.
  }


반면,
  onClickButton: function (e) {
    setTimeout(function () {
      textarea.focus(); // 이 경우, 이벤트 핸들러의 실행 범위를 벗어나므로, 키패드가 열리지 않는다.
    }, 500);
  }


위 '문제'에서의 상황은,
사용자의 클릭 이벤트 핸들러에서 타이머를 사용해 애니메이팅을 구현했기 때문에,
포커스가 들어가긴 했으나 실제로 키패드가 열리진 않았던 것이다.


여기서는, textarea에 직접 포커스를 주지 않고,
글쓰기 영역까지 이동하는 것으로 스펙을 합의하는 방법으로 해결했다.
꼭 포커스를 주지 않아도 사용성에 큰 문제가 없었기 때문이다.