textarea auto height

index.html

<textarea rows="1">Here is a very long value for testing auto height</textarea>

<pre><code class="language-js">document.querySelectorAll('textarea').forEach(el => {
  el.style.height = el.setAttribute('style', 'height: ' + el.scrollHeight + 'px');
  el.classList.add('auto');
  el.addEventListener('input', e => {
    el.style.height = 'auto';
    el.style.height = (el.scrollHeight) + 'px';
  });
});</code></pre>

script.js

document.querySelectorAll('textarea').forEach(el => {
    el.style.height = el.setAttribute('style', 'height: ' + el.scrollHeight + 'px');
    el.classList.add('auto');
    el.addEventListener('input', e => {
        el.style.height = 'auto';
        el.style.height = (el.scrollHeight) + 'px';
    });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.min.js"></script>

style.scss

textarea {
    resize: none;
    &.auto {
        overflow-y: hidden;
    }
}

// Some styles

textarea {
    -webkit-appearance: none;
    box-sizing: border-box;
    outline: none;
    width: 100%;
    max-width: 240px;
    font-size: 14px;
    font-family: 'Inter';
    line-height: 22px;
    padding: 16px 20px;
    border-radius: 15px;
    color: #404660;
    border: none;
    background: #fff;
    transition: box-shadow .25s;
    box-shadow: inset 0 0 0 1px var(--border-color, #E1E6F9), 0 0 0 3px var(--focus-color, transparent);
    &:focus {
       --focus-color: #ECEFFC;
    }
    &:focus,
    &:hover {
        --border-color: #BBC1E1;
    }
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #F6F8FF;
}

pre {
    margin: 60px 0 0 0;
    padding: 20px 24px;
    border-radius: 15px;
    background: #171827;
    code {
        font-family: 'Fira Mono';
        color: #BBC1E1;
        line-height: 1.4;
        font-size: 12px;
        .token {
            &.function {
                color: #5C86FF;
            }
            &.string {
                color: #F0B849;
            }
            &.parameter {
                color: #CB7DD0;
            }
            &.punctuation {
                color: #8A91B4;
            }
        }    
    }
}

styles

<link href="https://fonts.googleapis.com/css?family=Inter:400,500,600,700&amp;display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Fira+Mono&amp;display=swap" rel="stylesheet" />

textarea-auto-height.markdown

textarea auto height

A Pen by Aaron Iker on CodePen.

License.