input event

지니씨·2022년 3월 22일
0

프론트엔드

목록 보기
21/86

input

https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/input_event
input 이벤트는 <input>, <select>, <textarea> 요소의 value가 바뀔 때 발생합니다.

keyup

  • 키보드를 이용한 입력만 감지
  • 마우스 클릭을 통한 붙여넣기 등 다른 입력 감지 X

change

  • https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/change_event
  • change 이벤트는 사용자가 <input>, <select>, <textarea> 요소의 값을 변경할 때 발생합니다. input 이벤트와 달리 change는 요소의 value값이 변경될 때마다 매번 발생하지는 않을 수 있습니다.
  • 외부 클릭을 통한 입력 감지 / 키보드를 통한 단어 입력 감지 X
  • keyup, change 두가지 이벤트 모두 사용해야 input 의 모든 변화 이벤트 감지 가능

composition

  • compositonstart : 새로운 텍스트 조합 세션이 시작된 경우 트리거
  • compositionupdate : 현재 텍스트 조합 세션의 값이 변경된 경우 트리거
  • compositionend : 현재 텍스트 조합 세션이 완료되거나 취소된 경우 트리거
  • 조합문자 특성상 하나의 세션에 대해 start -> update (n번) -> end 순서로 사이클
  • e.isComposing === true || e.keyCode === 229 로 IME 조합 문자 입력 여부 판단 가능
    • 'IME 조합 문자'는 입력기(IME: Input Method Editor)를 통해 문자가 완전히 확정되기 전까지의 중간 상태 문자 (주로 한글, 일본어, 중국어처럼 조합식 입력이 필요한 언어에서 발생)
profile
하루 모아 평생 🧚🏻

0개의 댓글

Powered by GraphCDN, the GraphQL CDN