JavaScript의 oninput 이벤트는 입력 상자(input)에 값이 입력되거나 수정될 때마다 발생합니다. 텍스트를 한 글자씩 타이핑할 때마다 이벤트가 즉시 트리거되기 때문에, 실시간 검색, 입력값 유효성 검사, 문자 수 카운터 등을 구현할 때 매우 유용하게 활용됩니다.
oninput 이벤트 기본 사용법
아래 예제 코드를 실행하면 oninput 이벤트가 어떻게 동작하는지 확인할 수 있습니다. 사용자가 입력 필드에 텍스트를 입력하면, 입력된 값이 그대로 화면에 출력됩니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<p>아래에 입력해 보세요:</p>
<input type = "text" id = "newInput" oninput = "inputFunc()">
<p id = "demo"></p>
<script>
function inputFunc() {
var a = document.getElementById("newInput").value;
document.write("입력한 값: " + a);
}
</script>
</body>
</html>코드 설명
위 코드의 동작 원리를 살펴보겠습니다.
먼저 <input> 요소에 oninput = "inputFunc()" 속성을 지정하여, 사용자가 값을 입력할 때마다 inputFunc() 함수가 호출되도록 설정했습니다.
함수 내부에서는 document.getElementById() 메서드를 통해 입력 필드의 현재 값을 가져오고, 이를 화면에 출력하여 사용자에게 보여줍니다.
oninput과 onchange의 차이점
비슷한 역할을 하는 onchange 이벤트와의 차이점도 알아두면 좋습니다. oninput은 입력이 발생하는 즉시 이벤트가 실행되지만, onchange는 포커스가 다른 곳으로 이동하는 등 입력이 완료된 후에야 이벤트가 발생합니다. 따라서 실시간 반응형 UI를 만들려면 oninput 이벤트를 사용하는 것이 적합합니다.