[attribute] HTML - oninput 속성 ★ - 사용자 입력값 변경 시 바로 실행 (= oninput속성 = 온인풋속성) ※ 온인풋이벤트

1. oninput 예제 - 사용자 입력값 변경 시 이벤트 발생
2. oninput 정의
3. oninput 구문
4. oninput 예제 - 계산 결과를 <output> 태그에 넣기

oninput 예제 - 사용자 입력값 변경 시 이벤트 발생

 

<input type="text" id="hz" oninput="homzzang()">

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.getElementById("hz").value;

  document.getElementById("demo").innerHTML = "입력값: " + x;

}

</script>

 

결과보기

oninput 정의

 

사용자 입력값 받으면 oninput 속성 실행.

 

---

 

1. oninput 속성 사용 가능 태그 종류

<input> (<input type="password">, <input type="search">, <input type="text">), <textarea>

2. oninpu vs. onchange 이벤트. 

• oninput 이벤트 - ① 요소값 변경 직후 발생. ② <input>, <textarea> 요소에서만 작동.
• onchange 이벤트 - ① 요소값 변경 후 요소가 포커스 잃을 때 발생. ② 모든 요소에서 작동

 

3.

IE9 이상 주요 최신 브라우저 모두 지원.

 

oninput 구문

 

<element oninput="script">

 

---

[속성값]

 

script

oninput 이벤트 발생 시 실행할 JS코드

 

oninput 예제 - 계산 결과를 <output> 태그에 넣기

 

<form action="/action_page.php" id="hz" oninput="x.value=parseInt(a.value)+parseInt(b.value)">

<input type="range" id="a" name="a" value="50">

+ <input type="number" id="b" name="b" value="100">

<br><br>

<input type="submit">

</form>

<output form="hz" id="x" name="x" for="a b"></output>

결과보기