Amplíe dinámicamente la altura del tipo de entrada “texto” en función del número de caracteres escritos en el campo

Similar al siguiente JSFiddle (que marqué como favorito y no sé de dónde surgió la pregunta original):

http://jsfiddle.net/mJMpw/6/

 input { width: 200px; min-width: 200px; max-width: 300px; transition: width 0.25s; } 

¿Hay alguna forma de corregir el ancho de un campo de texto, por ejemplo 200px solamente, y hacer que la altura del campo de texto crezca si un usuario agrega más texto que el que 200px puede contener? Me gustaría agregar más filas, si un usuario necesita más espacio para escribir … así que necesito la altura , no el ancho, para cambiar el tamaño de forma dinámica.

¡Gracias!

Como otros explicaron, input campo de input no puede tener texto de línea múltiple, debe usar textarea para imitar un campo de entrada, y jQuery para hacer que cambie el tamaño automáticamente (con ancho fijo).

JS :

 //This span is used to measure the size of the textarea //it should have the same font and text with the textarea and should be hidden var span = $('').css('display','inline-block') .css('word-break','break-all') .appendTo('body').css('visibility','hidden'); function initSpan(textarea){ span.text(textarea.text()) .width(textarea.width()) .css('font',textarea.css('font')); } $('textarea').on({ input: function(){ var text = $(this).val(); span.text(text); $(this).height(text ? span.height() : '1.1em'); }, focus: function(){ initSpan($(this)); }, keypress: function(e){ //cancel the Enter keystroke, otherwise a new line will be created //This ensures the correct behavior when user types Enter //into an input field if(e.which == 13) e.preventDefault(); } }); 

CSS :

 textarea { width:200px; resize:none; overflow:hidden; font-size:18px; height:1.1em; padding:2px; } 

Manifestación.

Demo actualizada:

Esta nueva demostración actualizada tiene algunos errores corregidos y también admite la tecla Entrar, límite de altura máxima, el ancho no necesita establecerse fijo al principio (en su lugar podemos establecer su ancho mínimo). Es mucho más completo.

Demo actualizada

ACTUALIZADO [2]:

Como scrollHeight siempre es igual a la height , debemos establecer la altura en ‘1’ antes de scrollHeight, luego cuando borramos los caracteres, la autofit:

 $('textarea').on('keydown', function(e){ if(e.which == 13) {e.preventDefault();} }).on('input', function(){ $(this).height(1); var totalHeight = $(this).prop('scrollHeight') - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom')); $(this).height(totalHeight); }); 

Violín:

http://jsfiddle.net/mJMpw/551/

ACTUALIZADO:

Como dijeron amigos, no tiene saltos de línea. Mi sugerencia de usar es:

 $('textarea').on({input: function(){ var totalHeight = $(this).prop('scrollHeight') - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom')); $(this).css({'height':totalHeight}); } }); 

Violín:

http://jsfiddle.net/mJMpw/548/

RESPUESTA ORIGINAL:

esto es muy feo, pero podrías hacerlo así:

 $('input[type="text"]').on('keyup',function(){ var text = $(this).val(); var getWidth = $('' + text + '').insertAfter(this); $(this).css({'width':getWidth.outerWidth()}).next('.getWidth').remove(); }); 

Debe especificar la misma propiedad fonts / padding en .getWidth y debe ingresar:

 input, .getWidth { font-family:arial; font-size:12px; font-weight:normal; letter-spacing:normal; padding:3px; } 

Violín:

http://jsfiddle.net/9SMRf/