자바스크립트에서 입력되는 한글값 구하기(How to get current user input charactor when you can't use onKey event)

자바스크립트에서 입력되는 한글값 구하기

심플한 마크다운 에디터, 공글 을 만들면서 자바스크립트와 DOM에 대해서 많이 배웠다. 그 과정에서 애를 먹은 기능 중 하나가 바로 한글의 keyCode 인식 불가능 문제이었다. 텍스트 에디터를 만들기 위해서는, 그리고 한국 사람들도 사용하기 위해서는 한글 입력은 필수이었다.

여러가지 경우의 수를 console.log로 찍어 보면서 몇 가지를 알게 되었다.

• 키보드가 한글 입력일 때는 특수키(Shift, Control 등)를 제외하고는 onKeyUp 이벤트가 발생하지 않는다.

• 따라서 당연히 keyCode를 사용할 수도 없다.

• 여러가지 이벤트를 실험해본 결과 onInput 이벤트는 잘 작동했다. 이를 적절히 활용하면 가능할 것 같았다.

실시간으로 입력되는 텍스트가 필요한 상황이었다. 그래서 range와 onInput 이벤트를 사용해서 만들어 보았다. 아래는 input 이벤트가 일어나면 현재 커서(caret)를 기준으로 바로 앞칸의 텍스트를 리턴하는 코드이다.

const printCurrentInput = (event) => {
  const currentElement = window.getSelection().focusNode;
  const typedChar = currentElement.textContent.slice(
    window.getSelection().anchorOffset - 1,
    window.getSelection().anchorOffset
  );
  return typedChar;
}

이 코드의 한계로는 각각의 자음과 모음만을 필요로 하는, 즉 정말 어떤 글자키를 눌렀는지 알고 싶을 때는 사용하기 힘들다는 점이다. 다만 지금의 나와 같이 띄어쓰기(space)를 감지하고 싶을 경우 유용할 수 있다. 또한 특정 글자(예를 들면 "럼"과 같은)가 입력되었을 때 이벤트가 일어나야 한다면 유용할 것이다.

어쩐지 React 보다 바닐라 자바스크립트가 훨씬 더 강력하다는 생각이 드는 요즘이다.