[JavaScript] 페이지 로드 시 textarea 자동 조정 (탭 전환 고려)

 

문제 

페이지가 로드될 때 데이터가 있으면 이를 출력하고, 그 길이에 맞춰 textarea의 높이를 자동으로 조정하려고 했다.

이를 위해 아래 코드를 작성했다. 

window.onload = function(){
    // 기존 높이를 auto로 설정하여 높이를 새로 계산하도록 함
	textarea.style.height = 'auto';
	// 새로운 높이 설정
	textarea.style.height = `${textarea.scrollHeight + 3}px`; // 필요 시 여유 3px 추가
}

 

하지만 이렇게 해도 scrollHeight가 0으로 계산되어 높이가 제대로 조정되지 않는 문제가 발생했다.

 

 

 

 

해결 방법 

로드될 때 scrollHeight을 구하는 게 아닌, 탭이 전환될 시 scrollHeight을 구하도록 하였다.

 

 

1) setTimeout 콜백함수 사용

문제를 해결하기 위해 setTimeout 콜백함수를 사용해 지연을 주어 보았고, 1500ms 이상으로 설정했을 때 간혹 높이가 정상적으로 계산되기도 했다.

그러나 1500으로 주기엔 너무 느린 속도였다.

육안으로 textarea의 폭이 변하는게 다 보였다.

그리고 여전히 안정적이지 않아, 원인을 파악하기 위해 여러 테스트를 해보았다.

 

 

2) 탭 전환시 textarea height auto로 구하기

그러던 중, 우연히 콜백함수가 실행되기 전에, 두 번째 탭으로 전환하면 textarea의 높이가 정확히 계산된다는 것을 발견했다.

반면, 첫 번째 탭에 계속 머물러있으면 여전히 0으로 계산되었다.

 

 

첫 번째 탭에 머물러있던 경우)

 

 

 

두 번째 탭에 머물러있던 경우)

 

 

 

function openTab(tabName){
    // 탭 열기 
    
    // 만약 두 번째 탭이라면 textarea 높이 조절 하는 함수 실행하기 
    if(tabName ==='tab2'){
        adjustTextareaHeightForAll();
    }
}

function adjustTextareaHeightForAll(){
    // .. 생략 .. 
    const textarea = document.querySelectorAll('[id*="desc"]');
    textarea.style.height = 'auto';
    textarea.style.height = `\${textarea.scrollHeight + 3}px`;  
}

 

따라서 두 번째 탭을 눌렀을 때 textarea의 높이를 계산하는 방식으로 코드를 변경했다.

이렇게 하니 문제없이 높이가 제대로 조정되었다.

 

 

 

 

 

onload 시에 높이를 계산하면 왜 안 되는지 잘 모르겠다.

DOM이 완전히 로드되지 않아서 생긴 문제인지, 다른 이유가 있는지 확실하지 않다.

아마 기본이 Tab1이라 Tab1은 내용이 표시가 되는 반면, Tab2는 내용이 표시되기 전인 상태이다.

이 상황에서 height을 잡으려고 하니 0이 뜬 것 같다.

사용자가 클릭하지 않으면 내용이 표시되지 않으므로 onload 시 함수를 사용하는 것 보단, Tab 전환시에 함수를 사용하는 것이 더 바람직해보인다.