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:show
para um div)?
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:show
para um div)?
Respostas:
Na verdade não. Isso normalmente é feito usando javascript.
há uma boa discussão de maneiras de fazer isso aqui ...
Dimensionamento automático da área de texto usando protótipo
uma linha apenas
<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
this.scrollHeight + "px"
para this.scrollHeight + 3 + "px"
torna a área de texto grande o suficiente para não mostrar a barra de rolagem.
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.
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>
<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/…
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>