HTMLElement: input event

input 이벤트는 <input><select> 및 <textarea> 요소의 value 속성이 바뀔 때마다 발생한다.

전파 가능 가능
취소 가능 불가
인터페이스 InputEvent
이벤트 핸들러 속성 GlobalEventHandlers.oninput

또한, 이 이벤트는 아무 요소의 contenteditable 속성 및 designMode 속성이 활성화 되어도 발생할 수 있다. 이런 경우, contenteditable 및 designMode, 속성이 활성화된 자식을 가진 편집 불가능한 최초 부모 요소에서 발생한다. 예를 들어 특정 요소에서 부모자식관계 중 자식 관계 여러개가 해당 속성이 활성화되어 내용 변경 시 이벤트가 발생해야 할 때, 해당 속성이 활성화되지 않은 최초의 부모 요소를 기준으로 발생하게 된다.

type=checkbox 및 type=radio, 속성을 가진 <input> 요소의 경우, HTML5 규격에 의하면, input 이벤트는 반드시 사용자가 작동시킬 때마다 발생된다. 하지만 애초부터 그렇게 설계되어 있지 않은 경우가 있으므로, 반드시 아래 호환성 문단을 참고하거나, 호환되지 않을 경우, change 이벤트를 대신해서 사용하도록 한다.

참고: The input 이벤트는 change 이벤트와는 달리 value 속성이 바뀔 시마다 반드시 일어난다. 값을 선택하거나 옵션 선택하자마자 일어나지만, 특정 글자를 입력 시에는 입력이 끝나고 value 속성에 적용되어야 발생하는데, 예를 들면, 한글 입력의 경우 한글자가 완성된 뒤 다른 키를 입력(예: 엔터 키)이 일어나야 발생된다. 이 또한 브라우저마다 다르므로 호환성을 확인하여 대응해야 한다. (역자 주)

예시

이 예시는 <input> 요소에 값을 입력하자마자 로그에 기록한다.

HTML

<input placeholder="Enter some text" name="name"/>
<p id="values"></p>

JavaScript

const input = document.querySelector('input');
const log = document.getElementById('values');

input.addEventListener('input', updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}

Result

Specifications

Specification Status
HTML Living Standard
The definition of 'input event' in that specification.
Living Standard
Document Object Model (DOM) Level 3 Events Specification
The definition of 'input event' in that specification.
Obsolete

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
input eventChrome Full support 1Edge Full support 79
Full support 79
No support 12 — 79
Notes
Notes Not supported on select, checkbox, or radio inputs.
Firefox Full support 6IE Partial support 9
Notes
Partial support 9
Notes
Notes Only supports input of type text and password.
Opera Full support 11.6Safari Full support 3.1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 6Opera Android Full support 12Safari iOS Full support 2Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
Partial support  
Partial support
See implementation notes.
See implementation notes.

같이보기