[JavaScript] 자바스크립트에서 텍스트 영역 값 변경 확인하기

157_자바스크립트에서 텍스트 영역 값 변경 확인하기

[적용]

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

---

[문법]

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

---

[내용]

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

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

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

input 이벤트는 키 입력 발생과 함께 발생하지만, change 이벤트는 일정 시간 지연 후 발생한다.

 

HTML                                                                                                                                                              index.html

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

JavaScript                                                                                                                                                          main.js

// textarea 참조
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;
}

 

---

 

 

 

 

 

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