카테고리 없음

[Javascript] textarea 자동 크기 조절

xemaker 2023. 7. 19. 14:58

기존 textarea에 내용에 따라 자동으로 크기가 조절되는것이 있어서 해보려고 했다.

구글링 했고 상위검색된것으로 했는데 잘 안되는 것이였다.

그래서 몇개를 더 해보고 되었다.

그래서 실제 되는것을 군더더기 다 빼고 간단하게 적어본다.

(input type="textarea" 를 쓰면 안되고 <textarea 를 써야 한다. 이것때문에 삽질..)

<style>
  textarea{
    min-height:3rem;
    overflow-y:hidden;
    resize:none;
}
</style>
<script src="jquery.min.js"></script>
<script>
    $('document').ready(function(){
        $("#Input).val(opener.document.getElementById('comma').value);
    var content=document.getElementById('cInput');
    resize(content);

    });

   function resize(obj){
    obj.style.height='1px';
    obj.style.height=(12+obj.scrollHeight)+'px';
  }

</script>

  <div>
    <div><textarea id="cInput"></textarea>
  </div>

팝업창이고 부모창에서 값을 가져와서 textarea에 세팅한 후 크기를 조절한다.

참고로 팝업창을 쓸 때 값을 넘겨야 할 때는 자식창에서 값을 부모창으로 부터 가져와야 한다.

그 반대는 안된다.