Elastic TextArea

App.md

Elastic TextArea

elastic-textarea.markdown

Elastic TextArea

An Elastic TextArea component which resizes automatically based on the content entered in the textarea.

A Pen by K.C.Ashish Kumar on CodePen.

License.

index.html

<textarea elastic placeholder="Add/Remove lines of text to auto-resize this textarea"></textarea>

<!--
© 2018 https://kcak11.com / https://ashishkumarkc.com
-->

script.js

/*
© 2018 https://kcak11.com / https://ashishkumarkc.com
*/

(function() {
    var doElastic = function(elem) {
        elem.style.height = elem.getAttribute("default-height") + "px";
        elem.style.height = (elem.scrollHeight + 5) + "px";
    };
    [].forEach.call(document.querySelectorAll("textarea[elastic]"), function(et) {
        et.setAttribute("rows", "1");
        et.style.resize = "none";
        et.style.overflow = "hidden";
        et.style.boxSizing = "border-box";
        et.setAttribute("default-height", et.offsetHeight);
        doElastic(et);
        et.addEventListener("input", function() {
            doElastic(et);
        }, false);
    });
}());

style.css

/*
© 2018 https://kcak11.com / https://ashishkumarkc.com
*/

textarea {
   font-family: Verdana;
   border-top: none;
   border-left: none;
   border-right: none;
   border-bottom: 2px solid #000;
   background-color: #bcd9ed;
   width: 50%;
   outline: none;
   font-size: 22px;
}