[JavsScript] 자바스크립트 텍스트 박스 값 변경 확인하기

155_자바스크립트 텍스트 박스 값 변경 확인하기

[적용]

• 텍스트 입력 폼의 변경을 감시하고 싶을 때

---

[문법]

이벤트	의미
change	input 요소 변경 시 이벤트
input	input 요소 키 입력 시 이벤트

---

[내용]

텍스트 입력 폼의 데이터 변경 여부는 change와 input 이벤트로 감시가 가능하다.

addEventListener()를 사용해 이벤트 핸들러를 설정한다.

이벤트 핸들러 내부 함수는 앞서 기술한 텍스트 박스 값 읽어 오기 방법을 사용한다.

 

input 이벤트는 키 입력 발생과 함께 발생하지만 change 이벤트는 enter 키 혹은 포커스가 벗어났을 떄 발생한다.

 

HTML                                                                                                                                                              index.html

<input id="myText" type="text" />
<p class="log"></p>

JavaScript                                                                                                                                                          main.js

// input 요소 참조
const element = document.querySelector('#myText');
// 이벤트 등록
element.addEventListener('input', handleChange);

function handleChange(event) {
  // 값 가져오기
  const value = event.target.value;
  // 화면에 반영
  document.querySelector('.log').innerHTML = value;

 

실행결과

텍스트 입력 폼에 문자를 입력하는 즉시 아래의 상자에 같은 내용이 표시된다.

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김