줄바꿈, 칸 크기 조절 가능한 입력창 만들기

문제 발생

일반적으로 이름, 번화번호, 이메일 정도나 적던 input 칸에는 그렇게 많은 공간이 필요하지 않죠.

그래서 우리는 그저 일반적인 <input> 태그를 쓰게 되었습니다.

하지만 주문시 요청사항 혹은 기타 메모 등과 같은 입력 공간에는 줄바꿈(enter)이나 크기 변경, 안의 내용에 따라 크기가 변하는 input이 필요하게 되었습니다. 오늘은 이 부분을 해보시죠

 

좌 : 일반적으로 사용하던 크기 변경 불가의 input, 우 : 크기 변경이 가능한 input

 

해결 방법

TypeScript

// 여기는 input으로 memo를 넣는 부분에서 text 칸이 유동적으로 변화하게 만드는 부분

const tx = document.getElementsByTagName("textarea");

for (let i = 0; i < tx.length; i++) {

  tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");

  tx[i].addEventListener("input", OnInput, false);

}

// 높이를 자동으로 맞춰 확장하게끔.

function OnInput( ) {

  this.style.height = "auto";

  this.style.height = (this.scrollHeight) + "px";

}

 

HTML

<textarea placeholder="Teacher Memo" [(ngModel)]="memo"></textarea>

ngModel 은 Angular 에서 사용하는 값을 저장하는 변수에 해당합니다