[책] 자바스크립트 코드 레시피 278 - 144일차

텍스트 영역 값 변경 확인하기

• 텍스트 영역 변경 시 작업을 처리하고 싶을 때

구문

change 텍스트 영역 요소 변경 시 이벤트
input 텍스트 영역 요소 키 입력 시 이벤트

설명

텍스트 영역 폼의 데이터 변경 여부는 change와 input 이벤트로 감시가 가능합니다. addEventListener()를 사용해 이벤트 핸들러를 설정합니다. 이벤트 핸들러 내부 함수는 앞서 기술한 텍스트 영역 값 읽어 오기 방법을 사용합니다. input 이벤트는 키 입력 발생과 함께 발생하지만, change 이벤트는 일정 시간 지연 후 발생합니다.

실습

index.html

<textarea id="myText"></textarea>
<p class="log"></p>

---

script.js

const element = document.querySelector('#myText');
element.addEventListener('input', handleChange);
function handleChange(event) {
  const value = event.target.value;
  const htmlStr = value.split('\n').join('<br />');
  document.querySelector('.log').innerHTML = htmlStr;
}