컨텐츠에 따라 높이가 자동으로 조절되는 textarea 구현하기
July 13, 2024
높이가 컨텐츠에 따라 조절되는 textarea는 다음과 같이 구현합니다. 원리는 다음과 같습니다.
- 사용자가 값을 입력할 때마다 height를 ‘auto’로 설정하여 scrollHeight가 컨텐츠 높이만큼 만듭니다.
- 그 scrollHeight값을 height에 반영합니다.
- 높이가 늘어나더라도 스크롤바가 생기지 않도록 overflow를 hidden으로 설정합니다.
- 사용자가 수동으로 크기를 조절하지 못하게 하기 위해 resize를 none으로 설정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Auto-resizing Textarea</title>
<style>
textarea {
width: 100%;
box-sizing: border-box;
overflow: hidden; /* 스크롤바 숨김 */
resize: none; /* 사용자가 수동으로 크기 조절하지 못하게 함 */
}
</style>
</head>
<body>
<textarea
id="autoResizeTextarea"
rows="1"
oninput="autoResize(this)"
></textarea>
<script>
function autoResize(textarea) {
textarea.style.height = 'auto' // 높이를 자동으로 초기화
textarea.style.height = textarea.scrollHeight + 'px' // 스크롤 높이에 맞게 높이 설정
}
</script>
</body>
</html>