요즘 회사에서 이것저것 삽질을 하면서 뭔가 또 뚝딱거리고 있는데, HTML의 textarea 높이를 자동으로 조절할 필요가 생겼다. 여기저기 인터넷을 뒤져 발견한 방법들을 아래에 공유한다.
HTML 구조
기본 베이스 구조는 다음처럼 구성되었다고 가정한다.
<table>
<tr>
<td>
<textarea id="resize" placeholder="메모"></textarea>
</td>
</tr>
</table>방법1: jQuery 방식
처음 발견한 방법은 jQuery를 이용한 방법이다.
table {
width: 500px;
border: 1px solid black;
}
textarea {
overflow-y: hidden;
resize: none;
padding: 1em;
padding-bottom: 0.2em;
}$(document).ready(function() {
$("table").on("keyup", "textarea", function(e) {
$(this).css("height", "auto");
$(this).height(this.scrollHeight);
});
$("table").find("textarea").keyup();
})방법2: Pure JavaScript 방식
회사에는 위의 방식을 적용했었는데, 나중에 좀 더 찾아보니 jQuery를 쓰지 않는 방법도 있어 공유한다.
<table>
<tr>
<td>
<textarea id="resize" placeholder="메모" onkeydown="resize(this)" onkeyup="resize(this)"></textarea>
</td>
</tr>
</table>table {
width: 500px;
border: 1px solid black;
}
textarea {
overflow-y: hidden;
resize: none;
padding: 1em;
padding-bottom: 0.2em;
}
function resize(obj) {
obj.style.height = "1px";
obj.style.height = (12 + obj.scrollHeight) + "px";
}개발환경(jQuery를 안 쓴다던지)에 따라 사용방법을 고르면 된다.