Textarea

Aumenta altura em foco

<textarea placeholder="Área de texto"></textarea>

<textarea class="focusgrow" placeholder="Área de texto"></textarea>

Redimensionamento de altura automática para textarea

• Aumenta a altura da área de texto caso o conteúdo transborde.
• Oculta a barra vertical.

<label for="autorise" class="screen_reader">Área de texto</label>
<textarea id="autorise" class="formit autorise" placeholder="Área de texto" name=""></textarea>

let textarea = {
    autorise: function() {
        document.querySelectorAll(".autorise").forEach(element => {
            element.style.height = element.scrollHeight + "px";
            element.addEventListener('input', function() {
                element.style.height = 0;
                element.style.height = element.scrollHeight + "px";
            });
        });
    }
}.autorise();

Redimensionamento de altura para elemento com atributo contenteditable

<label class="screen_reader">Conteúdo editável</label>
<div class="grow formit">
    <div contenteditable="true" placeholder="Conteúdo editável" spellcheck="false"></div>
</div>

Elemento com atributo contenteditable não necessita javascript, só esse trecho de código CSS basta.

.grow {
    display: grid;
}
.grow [contenteditable] {
    grid-area: 1 / 1 / 2 / 2;
    resize: none;
    overflow: hidden;
}

Transferir conteúdo de elemento contenteditable para textarea

<label class="screen_reader">Inserir conteúdo</label>
<div class="textfield formit">
    <div data-content="my_textfield" contenteditable="true" placeholder="Conteúdo editável" spellcheck="false"></div>
    <textarea id="my_textfield" name=""></textarea>
</div>

Veja no código que o elemento div contenteditable contém o atributo data-content e o textarea com atributo id com o mesmo valor.

Isso faz com que você possa ter quantos textfield precisar na mesma página.

textfield funciona normalmente com grow caso precise do redimensionamento da altura automática.

let textarea = {
    textfield: function() {
        document.execCommand("defaultParagraphSeparator", false, "p");
        var elementEditable = document.querySelectorAll(".textfield [contenteditable]");
        elementEditable.forEach(element => {
            var textarea = document.getElementById(element.dataset.content);
            textarea.style.display = "none";
            var events = ['keydown', 'keyup', 'change', 'input', 'mousedown', 'mouseup'];
            events.forEach(event => {
                element.addEventListener(event, function() {
                    textarea.value = this.innerHTML;
                });
            });
        });
    },
}.textfield();

Tamanhos para Áreas de texto e Conteúdos editáveis

<label for="small">Área de texto tamanho pequeno</label>
<textarea id="small" class="formit sm" placeholder="textarea pequeno"></textarea>

<label for="standard">Área de texto tamanho padrão</label>
<textarea id="standard" class="formit" placeholder="textarea padrão"></textarea>

<label for="big">Área de texto tamanho grande</label>
<textarea id="big" class="formit lg" placeholder="textarea grande"></textarea>


<label>Conteúdo editável tamanho pequeno</label>
<div class="formit sm">
    <div contenteditable="true" placeholder="contenteditable pequeno" spellcheck="false"></div>
</div>
<div class="formit">
<label>Conteúdo editável tamanho padrão</label>
    <div contenteditable="true" placeholder="contenteditable padrão" spellcheck="false"></div>
</div>
<div class="formit lg">
<label>Conteúdo editável tamanho grande</label>
    <div contenteditable="true" placeholder="contenteditable grande" spellcheck="false"></div>
</div>

.formit.sm textarea, textarea.formit.sm, .formit textarea.sm, 
.formit.sm [contenteditable], [contenteditable].formit.sm, .formit [contenteditable].sm {
    min-height: 12vh;
}
/* padrao - min-height: 18vh */
.formit.lg textarea, textarea.formit.lg, .formit textarea.lg, 
.formit.lg [contenteditable], [contenteditable].formit.lg, .formit [contenteditable].lg {
    min-height: 22vh;
}

textarea.focusgrow {
    transition: 1s;
}
textarea.sm.focusgrow:focus, .sm textarea.focusgrow:focus {
    min-height: calc((12vh * 100) / 60);
}
textarea.focusgrow:focus {
    min-height: calc((18vh * 100) / 60);
}
textarea.lg.focusgrow:focus, .sm textarea.focusgrow:focus {
    min-height: calc((22vh * 100) / 60);
}

.grow {
    display: grid;
}
.grow [contenteditable], .textfield.grow [contenteditable] {
    grid-area: 1 / 1 / 2 / 2;
}
.textfield [contenteditable] p:first-child {
    margin-top: 0;
    padding-top: 0;
}
[contenteditable=true]:empty::before {
    display: block;
    content: attr(placeholder);
    pointer-events: none;
    opacity: .6;
}
.formit.autorise, .formit.grow, .formit.textfield, .grow [contenteditable], .textfield.grow [contenteditable] {
    position: relative;
    resize: none;
    overflow: hidden;
}

.formit [contenteditable]:focus-within, .formit [contenteditable]:active {
    border: var(--inputFocus__border);
    box-shadow: var(--inputFocus__box-shadow);
}