textarea 에서 enter/backspace 에 따라서 높이 늘리기

오늘은 엔터를 눌렀을 때 textarea 의 높이가 늘어나는 작업을 했다.

 

처음에는 주석처리 된 부분처럼 textarea 의 높이값을 구해서 그 높이에 임의의 값을 추가해서 늘리려고 했는데, 

너무 부자연스럽게 늘어나고 줄어들었다.

 

그래서 검색해보던 중 split 에 정규표현식으로 자르는 방법을 알게됐다.

$reviewTextarea.addEventListener('keyup', (event) => {
  const HEIGHT = 20;
  const textareaHeight = $reviewTextarea.clientHeight;
  const row = parseInt($reviewTextarea.getAttribute('rows'));
  let text = $reviewTextarea.value;
  let rowCnt = text.split(/\r\n|\r|\n/).length;
  console.log(rowCnt);
  $reviewBtnBox.style.display = 'flex';
  // console.log(event)
  if(event.key === 'Enter'){
    $reviewTextarea.setAttribute('rows', rowCnt);
    // $reviewTextarea.style.height = textareaHeight + HEIGHT + 'px';
    console.log(textareaHeight);
  }else if(event.key === 'Backspace'){
    if(rowCnt >= 1){
      $reviewTextarea.setAttribute('rows', rowCnt);
      // $reviewTextarea.style.height = textareaHeight - HEIGHT + 'px';
    }
  }
});

 

split 으로  textarea 값을 개행 문자를 기준으로 자르고 배열의 수를 가져와서 늘려줬다.

 

\r \n \r\n 차이

\r CR(캐리지 리턴) 은 x 이전 Mac OS 에서 줄 바꾸기 문자로 사용
\n LF(라인피드) 은 unix / Mac OS X에서 줄 바꾸기 문자로 사용
\r\n CRLF 는 window 에서 줄 바꾸기 문자로 사용

 

최종 완성된 모습