InputEvent 알아보기

웹기반 텍스트 에디터를 만들 때 브라우저마다 다른 스펙에 대응이 어려운점, 편집 핸들링 어려운 점, 사용자마다 사용이 다양한 점 등을 해소하기 위해 나왔다고 한다. 자바스크립트 코드도 많이 써야하는데 브라우저마다 대응을 해야겠냐! 조금이라도 쉽게 할수 있도록 하자! 이런 느낌

 

 

InputEvent는 편집가능한 콘텐츠의 내용이 변경되었을 때 발생하는 이벤트다.

대표적으로 편집이 가능한 콘텐츠는

<input type="text" id="input-box" />
<textarea  id="text-area"></textarea>

편집가능한 콘텐츠이기 때문에 contenteditable 속성이 true인 것도 물론 포함이다.

   <p contenteditable="true">
      contenteditable
    </p>

InputEvent는 UIEvent와 Event를 상속받는다.

 

인스턴스 속성

InputEvent.data	삽입된 글자를 반환한다. 문자가 삭제된 경우는 null이다.
InputEvent.dataTransfer	리치텍스트나 일반 텍스트 데이터에 대한 정보를 반환한다.
InputEvent.inputType	만들어진 입력 유형을 포함한다. 삽입: insertText 삭제: deleteContentBackward 붙여넣기: insertFromPaste 굵게: formatBold 더 다양한 타입은 이곳 예제를 실행해본다.
InputEvent.isComposing	구성시작 후와 구성 종료 전에 이벤트가 시작되는 여부를 나타내는 Boolean형의 데이터를 반환한다. *글을 작성하는 현재(2023.02.03) 사파리: 실험중 사파리 on iOS: 지원안함

 

 

사용자가 입력한 값을 읽는 방법으로 많이 사용하는 것이 KeyBoardEvent 일 것인데, 만든 이의 의도처럼 InputEvent를 적극 활용한다면 더 수월하게 입력값을 다룰 수 있을 것이다. 예를 들어 mac 시스템 명령을 통한 이모지 입력... (ctrl + cmd + space ..) 이 포스팅의 계기..

 

참고사이트

https://w3c.github.io/input-events

Input Events

https://developer.mozilla.org/en-US/docs/Web/API/InputEvent

InputEvent - Web APIs | MDN