요소가 사용자 입력을 받을 때마다 스크립트를 실행하려면 oninput 이벤트 속성을 사용하세요. 이 속성은 입력 필드의 값이 변경되는 순간마다 실시간으로 트리거되기 때문에, 사용자가 타이핑하는 즉시 화면에 반응하는 동적인 웹 페이지를 만들 수 있습니다.
예를 들어 회원가입 폼에서 아이디 중복 여부를 바로 확인하거나, 검색창에 글자를 입력하는 동안 실시간으로 결과를 보여주는 기능을 구현할 때 oninput이 유용하게 활용됩니다.
예제
다음 코드는 oninput 속성을 활용한 기본적인 예제입니다. 입력 필드에 이름을 작성하면 그 값이 즉시 아래 문단에 출력됩니다.
<!DOCTYPE html>
<html>
<body>
<p>아래에 이름을 입력하세요:</p>
<input type = "text" id = "myid" oninput="display()">
<p id="test"></p>
<script>
function display() {
var p = document.getElementById("myid").value;
document.getElementById("test").innerHTML = "입력한 답은 " + p + "입니다";
}
</script>
</body>
</html>코드 설명
위 예제의 동작 방식은 다음과 같습니다.
1. <input> 요소에는 oninput="display()" 속성이 지정되어 있어, 사용자가 입력 필드에 값을 입력할 때마다 display() 함수가 자동으로 호출됩니다.
2. display() 함수 내부에서는 document.getElementById("myid").value를 통해 입력 필드의 현재 값을 가져옵니다.
3. 가져온 값은 innerHTML을 사용하여 id="test"인 문단에 실시간으로 출력됩니다.
이처럼 oninput은 onchange와 달리 포커스가 벗어나기를 기다릴 필요 없이, 입력이 발생하는 매 순간 이벤트가 발생한다는 점이 특징입니다.