Textarea auto height com JavaScript

114d atrás

Ion

---

0 0

O código abaixo, aplica o efeito auto height a um textarea, usando #JavaScript. Esse efeito, também conhecido como auto grow, ou auto resize, redimensiona o textarea para comportar o texto nele, o que é ótimo para inputs de mensagens e campos com muito texto.

Para iniciar, simplesmente inclua um textarea no seu HTML:

<textarea></textarea>

Vamos agora selecionar esse textarea no JavaScript:

const textarea = document.querySelector('textarea');

Depois, adicione a função principal, que vai aplicar o efeito:

function autoHeight(textarea) {
    textarea.style.height = `${textarea.scrollHeight}px`;

    textarea.addEventListener('input', e => {
        e.target.style.height = 'auto';
        e.target.style.height = `${e.target.scrollHeight}px`;
    });

    window.addEventListener('resize', () => {
        textarea.style.height = 'auto';
        textarea.style.height = `${textarea.scrollHeight}px`;
    });
}

Por último, é só chamar a função passando o textarea selecionado:

autoHeight(textarea);

O código completo e o resultado estão a seguir: