oninput 이벤트

DOM 이벤트 InputEvent

정의와 사용법

oninput 이벤트는 요소가 사용자 입력을 받을 때 발생합니다.

<input> 또는 <textarea> 요소의 값이 변경될 때 이 이벤트가 발생합니다.

안내:이 이벤트는 다음과 유사합니다: onchange 이벤트다른 점은 oninput 이벤트가 요소 값이 변경된 후 즉시 발생하며, onchange는 요소가 포커스를 잃고 내용이 변경된 후 발생한다는 점입니다. 또한 onchange 이벤트는 <select> 요소에도 적용됩니다.

예제

예제 1

사용자가 <input> 필드에 내용을 입력할 때 JavaScript를 실행합니다:

<input type="text" oninput="myFunction()">

직접 시도해 보세요

예제 2

스크롤 바 - 스크롤 바 값이 동적으로 업데이트되는 방법:

<input type="range" oninput="myFunction(this.value)">

직접 시도해 보세요

문법

HTML에서:

<element oninput="myScript">

직접 시도해 보세요

JavaScript에서:

object.oninput = function(){myScript};

직접 시도해 보세요

JavaScript에서 addEventListener() 메서드를 사용하여:

object.addEventListener("input", myScript);

직접 시도해 보세요

주의사항:Internet Explorer 8 이상 버전에서 지원하지 않음 addEventListener() 메서드。

기술 세부 사항

버블링: 지원
취소 가능: 지원하지 않음
이벤트 유형: Event, InputEvent
지원되는 HTML 태그: <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="month">, <input type="number">, <input type="password">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week"> 및 <textarea>
DOM 버전: 레벨 3 이벤트

브라우저 지원

표의 숫자는 이 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

이벤트 크롬 IE 파이어폭스 사파리 오페라
oninput 지원 9.0 4.0 5.0 지원
DOM 이벤트 InputEvent