llenando un área de texto con contenido para que el usuario edite.¿hay alguna manera de hacer que un área de texto se extienda para ajustarse a su contenido sin usar php o javascript?
¿es posible hacer que se estire para ajustar el contenido con css (como overflow:show para un div)?
No realmente. Esto normalmente se hace usando javascript.
hay una buena discusión de maneras de hacer esto aquí ...
Se trata de una solución muy simple, pero funciona para mí:
<!--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>La altura del cuadro aumenta con * cada * pulsación de tecla, no solo líneas nuevas. Incluso retrocede y elimina causa que aumente la altura. Corrección, y obtendrás el upvote de vuelta. – Birrel
algunos navegadores como IE don ' . t calcular scrollheight con razón, que puede causar este tipo de problemas no importa que está sucediendo para mí en Chrome, así ... – KthProg
aquí está la solución (edición cola está llena): ' 'básicamente tienes que establecer la altura en 1px primero, debido a esto: http://stackoverflow.com/questions/10722058/height-of-textarea-increases-when-value-increased-but-does- not-reduce-when-value – KthProg
Aquí hay una función que funciona con jQuery (solo para la altura, no para el ancho):
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: El op pedido una solución que no utiliza Javascript, sin embargo, esto debería ser útil para muchas personas que vienen a través de esta pregunta.
una línea única
<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
cómo esto tiene solo dos votos. esto es increíble Martin. Solo paso 30 minutos tratando de resolver esto. Buen trabajo. –
no ¿Alguien tiene una respuesta que no tiene virus que no usen una estructura? :-( – starbeamrainbowlabs