oninput 이벤트
예시
사용자가 <input> 필드에 무언가를 쓸 때 JavaScript를 실행하십시오:
<input type="text" oninput="myFunction()">
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
oninput 이벤트는 요소가 사용자 입력을 받을 때 발생합니다.
이 이벤트는 <input> 또는 <textarea> 요소의 값이 변경될 때 발생합니다.
팁: 이 이벤트는 onchange 이벤트와 유사합니다. 차이점은 oninput 이벤트는 요소의 값이 변경된 직후에 발생하는 반면 onchange는 내용이 변경된 후 요소가 포커스를 잃으면 발생한다는 것입니다. 다른 차이점은 onchange 이벤트가 <select> 요소에서도 작동한다는 것입니다.
브라우저 지원
표의 숫자는 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Event | |||||
---|---|---|---|---|---|
oninput | Yes | 9.0 | 4.0 | 5.0 | Yes |
통사론
HTML:
<element oninput="myScript">
자바스크립트:
object.oninput = function(){myScript};
JavaScript에서 addEventListener() 메서드를 사용하여 다음을 수행합니다.
object.addEventListener("input", myScript);
참고: addEventListener () 메서드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.
기술적 세부 사항
거품: | 네 |
---|---|
취소 가능: | 아니 |
이벤트 유형: | 이벤트 , 입력 이벤트 |
지원되는 HTML 태그: | <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="month">, <input type=" 번호">, <입력 유형="비밀번호">, <입력 유형="범위">, <입력 유형="검색">, <입력 유형="전화">, <입력 유형="텍스트">, < 입력 유형="시간">, <입력 유형="url">, <입력 유형="주"> 및 <텍스트 영역> |
DOM 버전: | 레벨 3 이벤트 |
더 많은 예
예시
범위 슬라이더 - 슬라이더 값을 동적으로 업데이트하는 방법:
<input type="range" oninput="myFunction(this.value)">