HTML의 oninput 이벤트 속성은 사용자가 <input> 또는 <textarea> 요소에 값을 입력하는 순간마다 자동으로 실행되는 이벤트 핸들러입니다. 키보드로 글자를 하나하나 입력하거나 지울 때마다 즉시 반응하기 때문에, 실시간 검색, 유효성 검사, 글자 수 카운터 등 다양한 인터랙티브 기능을 구현할 때 매우 유용하게 활용됩니다.
기본 문법
oninput 이벤트 속성의 기본적인 작성 형식은 다음과 같습니다.
<tagname oninput="script"></tagname>
여기서 script 부분에는 해당 요소에 입력이 발생했을 때 실행하고자 하는 JavaScript 코드나 함수 호출을 작성합니다.
실전 예제
아래 예제는 textarea에 사용자가 메시지를 입력하는 순간, oninput 이벤트가 발생하여 배경색이 변경되는 간단한 데모입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
padding: 20px;
}
textarea {
border: 2px solid #fff;
background: transparent;
font-size: 1rem;
}
::placeholder {
color: #000;
font-size: 1rem;
}
</style>
</head>
<body>
<h1>HTML oninput Event Attribute Demo</h1>
<textarea placeholder="Enter your message here" oninput="inputFn()" rows='8' cols="50"></textarea>
<script>
function inputFn() {
document.querySelector('textarea').style.background = '#ffffff36';
}
</script>
</body>
</html>코드 설명
- CSS 부분: 그라데이션 배경과 투명한 textarea 스타일을 정의하여 시각적으로 돋보이게 만들었습니다.
- oninput="inputFn()": textarea에 입력이 발생할 때마다
inputFn()함수가 호출됩니다. - JavaScript 함수:
querySelector()로 textarea를 선택한 뒤, 배경색을 반투명 흰색(#ffffff36)으로 변경합니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 화면이 나타납니다.
이제 텍스트 영역에 직접 메시지를 입력해 보세요. 첫 글자를 입력하는 순간 oninput 이벤트가 트리거되어 textarea의 배경색이 아래와 같이 변경되는 것을 확인할 수 있습니다.
정리
oninput 이벤트 속성은 사용자의 입력을 실시간으로 감지할 수 있는 강력한 도구입니다. onchange 이벤트가 포커스가 벗어난 후에만 발생하는 것과 달리, oninput은 입력되는 모든 순간에 반응하기 때문에 더욱 즉각적인 사용자 경험을 제공합니다. 폼 유효성 검사, 실시간 미리보기, 자동 저장 기능 등을 구현할 때 적극적으로 활용해 보세요.