[Javascript] textarea Autosize 만들기 (스크롤이 자동으로 올라가는 현상 해결하기)

textarea의 autosize를 구현하는데 계속 스크롤이 위로 올라가는 현상이 발생했다. 스크롤 이벤트 자체를 textarea에만 사용했기에 코드가 꼬인것도 아닌데 왜 이상하게 작동이 됐을까?

<textarea onkeyup="textareaResize(this)" rows="9" maxlength="2000"></textarea>

const textareaResize = (event) => {
    event.style.height = 'auto';
    event.style.height = (event.scrollHeight) + 'px';
}

내가 처음 사용했던 식이다.

당연히 script 부분이 잘못 됐을거라 생각해 식을 아래와 같이 수정했다.

const textareaResize = (event) => {
    let scrollTop = event.scrollTop
    event.style.height = 'auto';
    event.style.height = (event.scrollHeight) + 'px';
    event.scrollTop = scrollTop
}

현재 scrollTop의 위치를 기억해두고 줄이 바꼈을 때 이전 스크롤의 위치를 다시 scrollTop에 넣어주는 방법이다. 그러나 전혀 해결이 되지 않았다.

하지만 이 작업을 하면서 엔터를 칠 때 손을 떼는 순간 스크롤이 위로 올라간다는 사실을 발견해 혹시나 하면서 html부분을 봤는데..

 

<textarea onkeyup="textareaResize(this)" rows="9" maxlength="2000"></textarea>

 

역시나 여기에 문제가 있었다. 일반적으로 텍스트는 keydown시 입력이 되기 때문에 먼저 화면에 텍스트가 반영이 된 다음 키를 떼는 순간 keyup이 발동해서 스크롤이 위로 올라가 버리는거였다.

<textarea onkeydown="textareaResize(this)" rows="9" maxlength="2000"></textarea>

그래서 여기를 keydown으로 바꿔주었더니 해결 되었다.