[event] html은 onInput 리액트는 onchage

문제발생

리액트는 input 태그에서 onchage를 하면 키보드가 입력될때마다 인식한다.

하지만 html의 경우에는 값을 작성하고, 마우스로 다른곳을 클릭했을때 인식한다.

그러면 html은 값이 바뀔때마다 바로 인식하는 이벤트가 없을까 하고 고민하다가 onInput이란것을 알게 되었다.

 

사용법

<input type="text" id="content" oninput=""/>

이게 끝이다.

이러면 키보드 하나하나를 인식한다.

다음은 예제를 보자.

 

예제

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<input type="text" id="input" oninput="javascript:hello()">
<div id="contentWrite"></div>

<script>
  const hello = () => {
    console.log($("#input").val());
    $("#contentWrite").text($("#input").val());
  }
</script>

input에 값이 변경될때마다 콘솔과 div에 찍힌다.

 

코드펜에서 테스트를 해보자.

 

See the Pen Untitled by 소망 (@denist2322) on CodePen.