Vue event

아이폰 가상키보드로 backspace 버튼을 지속 누르고 있게 되면. 한글자씩 지워지다가 일정 수준이 지나면 단어단위로 지워지게 된다. 아마도 글이 많은 경우에 속도를 개선하기 위해 이렇게 처리된 것 같다. 여기서 알게된 점은 이 두 현상이 일으키는 이벤트는 사실상 다르다.

전자의 경우 event.inputType 값이 ‘deleteContentBackward’ 인 이벤트가 들어오게 되고 후자의 경우 ‘deleteWordBackward’ 인 이벤트가 들어오게 된다.

비즈니스 요건에 따라서 위 두 케이스를 구분해서 처리해야 하는 상황이 있었는데. 이벤트로 들어오는 객체의 inputType 속성을 참고하면 된다.

  • deleteContentBackward

    • 한 글자씩 지우는 이벤트
  • deleteWordBackward

    • 한 단어씩 지우는 이벤트

안드로이드와 아이폰이 지워지는 방식이 조금은 달라서 위 이벤트가 안드로이드 쪽 웹뷰에서도 동일하게 나타날지는 모르겠다. 단말기 OS 뿐만아니라 웹 브라우저의 차이도 분명 존재할 것 같다. 찾아본 자료에 의하면 firefox, IE 의 경우는 event.inputType 속성 자체가 제공되지 않는다고 확인헀다.

Share