[자바스크립트] 반응형 입력 폼 만들기

다음은 텍스트 입력 폼에 대한 간단한 설명과 코드입니다. 이 코드는 텍스트를 입력할 때 텍스트 영역의 높이가 자동으로 조절되도록 합니다.

HTML

텍스트 영역을 정의합니다.

<textarea oninput="autoGrow(this)"></textarea>

oninput 속성을 사용하여 텍스트 입력 시 autoGrow 함수를 호출합니다.

CSS

텍스트 영역의 스타일을 설정합니다.

textarea {
    resize: none;
    overflow: hidden;
    min-height: 50px; /* 최소 높이 */
    max-height: 100px; /* 최대 높이 */
    box-sizing: border-box; /* 패딩 포함 크기 계산 */
}

resize: none으로 크기 조절을 비활성화하고, overflow: hidden으로 스크롤바를 숨깁니다. min-height와 max-height로 텍스트 영역의 높이 범위를 설정합니다. box-sizing: border-box로 패딩을 포함한 크기 계산을 설정합니다.

Javscript

텍스트 입력 시 호출되는 autoGrow 함수를 정의합니다.

function autoGrow(element) {
    element.style.height = "5px";
    element.style.height = (element.scrollHeight) + "px";
}

autoGrow 함수는 텍스트 입력 시 호출됩니다. 먼저 텍스트 영역의 높이를 최소화한 후, scrollHeight 값을 사용하여 텍스트 영역의 높이를 자동으로 조절합니다. scrollHeight는 요소 내부의 콘텐츠 높이를 반환합니다.