Existe uma maneira de fazer com que uma área de texto se estenda para caber em seu conteúdo sem usar PHP ou JavaScript?

97

Estou preenchendo uma área de texto com conteúdo para o usuário editar.

É possível esticar para ajustar o conteúdo com CSS (como overflow:showpara um div)?

html css significado
fonte
1
Alguém não tem uma resposta que não tenha bugs que não use um framework? :-(
starbeamrainbowlabs
Eu simplesmente uso o css max-width: 100% e ele se ajusta automaticamente a uma caixa. Algum problema com isso?
yashas123
Aqui está uma solução moderna (usa uma linha de JS e alguma magia CSS): codepen .
Oliver

Respostas:

219

uma linha apenas

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
Martin Prestone
fonte
8
como isso tem apenas dois votos. isso é incrível Martin. Acabei de passar 30 minutos tentando resolver isso. Ótimo trabalho.
Philip Duffney
31
Isso é ótimo. Eu gostaria apenas de acrescentar que mudar this.scrollHeight + "px"para this.scrollHeight + 3 + "px"torna a área de texto grande o suficiente para não mostrar a barra de rolagem.
maarten
Problema: quando o usuário escreve o suficiente para rolar para baixo, ele redefine a posição de rolagem toda vez que adiciona uma nova linha com Enter.
Costa
5
Eu sei que esta é uma pergunta antiga, mas eu tenho uma área de texto em uma página de edição, e ela já tem um valor quando a página é carregada, como posso expandi-la para caber no conteúdo?
Arootin Aghazaryan
1
@ArootinAghazaryan - Você já pode ter descoberto uma solução, mas para qualquer outra pessoa: Basta criar uma função com o código de redimensionamento em vez de tê-lo embutido no HTML. Em seguida, você pode chamar a mesma função no carregamento da página.
Magnus Eriksson
6

Aqui está uma função que funciona com jQuery (apenas para altura, não largura):

function setHeight(jq_in){
    jq_in.each(function(index, elem){
        // This line will work with pure Javascript (taken from NicB's answer):
        elem.style.height = elem.scrollHeight+'px'; 
    });
}
setHeight($('<put selector here>'));

Nota: O op pediu uma solução que não usa Javascript, no entanto, isso deve ser útil para muitas pessoas que se deparam com esta questão.

Chris Dutrow
fonte
5

Esta é uma solução muito simples, mas funciona para mim:

<!--TEXT-AREA-->
<textarea id="textBox1" name="content" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');">Hello World</textarea>

<!--JAVASCRIPT-->
<script type="text/javascript">
function setHeight(fieldId){
    document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
}
setHeight('textBox1');
</script>
Expandir snippet

NicB
fonte
2
A altura da caixa aumenta a cada pressionamento de tecla, não apenas novas linhas. Mesmo backspace e delete aumentam a altura. Conserte e você terá o upvote de volta.
Birrel
alguns navegadores como o IE não calculam a altura de rolagem corretamente, o que pode causar esse tipo de problema. não importa se isso está acontecendo comigo no Chrome também ...
KthProg
1
aqui está a solução (a fila de edição está cheia): <style> textarea { resize: none; overflow: auto; } </style> <!--TEXT-AREA--> <textarea onkeyup="setHeight.call(this);">Hello World</textarea> <!--JAVASCRIPT--> <script type="text/javascript"> function setHeight(){ this.style.height = '1px'; this.style.height = this.scrollHeight + 'px'; } </script>basicamente, você precisa definir a altura para 1px primeiro, devido a isso: stackoverflow.com/questions/10722058/…
KthProg
3

Outra solução simples para controle dinâmico de área de texto.

<!--JAVASCRIPT-->
<script type="text/javascript">
$('textarea').on('input', function () {
            this.style.height = "";
            this.style.height = this.scrollHeight + "px";
 });
</script>
Expandir snippet

Krutika Patel
fonte