keydown이벤트 실행시 setTimeout을 사용하면?

마데슾 : My Dev Space·2020년 1월 21일
0

chatter box sprint중 텍스트 입력창에 입력하게되는 글이 길어지게 되면 자동으로 늘어나는 textarea를 만들고 싶어서

맨처음에는 아래와 같이 작성을 했더니 textarea의 높이값이 한박자 느리게 변경되었고,

inputText.addEventListener("keydown", autoSize);

autoSize: function() {
  let inputText = document.querySelector("#message");
  inputText.style.height = "45px";
  inputText.style.height = `${inputText.scrollHeight}px`;
}

구글링을 통해 코드펜에 어떤분이 올려놓은 코드를 참고하여 아래처럼 작성하니
textarea의 높이값이 바로바로 변경이 되었다.

autoSize: function() {
  let inputText = document.querySelector("#message");
  setTimeout(function() {
    inputText.style.height = "45px";
    inputText.style.height = `${inputText.scrollHeight}px`;
  }, 0);
}

setTimeout으로 height를 바꿔주면 바로 적용되는 이유가 궁금하니 좀더 찾아봐야겠다

inputText.style.height = `${inputText.scrollHeight}px`

참고 코드펜

profile
👩🏻‍💻 🚀

0개의 댓글