How do I automatically resize the font-size inside a textarea to not overflow?-CodePudding

How do I resize the font-size of a textarea to fit inside the textarea and so that no scrollbar will appear? I've got a maxlength property set so no one can get the font size small enough.

CodePudding user response：

I believe I found an old post related to what you're looking for: https://stackoverflow.com/a/32177958/19655623

At the bottom of the comment there is a preview of the code

CodePudding user response：

Hope this will help. Thanks

    /* CSS */
    textarea {
      font-size: 20px;
      resize: none;
      overflow: hidden;
    }

    <!--HTML-->
    <textarea onkeydown="reduceFontSize()" id="myTextarea" maxlength="100"></textarea>

    // JS
    function reduceFontSize() {
      let textArea = document.getElementById("myTextarea");
      if (textArea.clientHeight < textArea.scrollHeight) {
        textArea.style.height = "46px";
        textArea.style.width = "235px";
        textArea.style.fontSize = "12px";
      }
    }