validar - pasar el valor de un input text a una variable javascript

Creando un área de texto con cambio de tamaño automático

Question

Había otro hilo sobre esto , que he intentado. Pero hay un problema: el área de textarea no se reduce si elimina el contenido. No puedo encontrar ninguna forma de reducirlo al tamaño correcto: el valor de clientHeight vuelve a ser el tamaño completo del área de textarea , no su contenido.

El código de esa página está abajo:

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if ( !text )
      return;

   var adjustedHeight = text.clientHeight;
   if ( !maxHeight || maxHeight > adjustedHeight )
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if ( maxHeight )
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if ( adjustedHeight > text.clientHeight )
         text.style.height = adjustedHeight + "px";
   }
}

window.onload = function() {
    document.getElementById("ta").onkeyup = function() {
      FitToContent( this, 500 )
    };
}

Answer 1

UNA SOLUCIÓN COMPLETA YA SIMPLE

Actualizado 23/08/2017 (Soporte de navegador mejorado para móviles y tabletas)

El siguiente código funcionará:

• En la entrada clave.
• Con texto pegado (clic derecho & ctrl + v).
• Con el texto cortado (clic derecho y ctrl + x).
• Con texto precargado.
• Con todo el sitio de textarea (multiline textbox) .
• Con Firefox (v31-55 probado).
• Con cromo (v37-60 probado).
• Con IE (v9-v11 probado).
• Con Edge (v14-v15 probado).
• Con IOS Safari .
• Con el navegador de Android .
• Con el modo estricto de JavaScript.
• Se valida w3c .
• Y es ágil y eficiente.

OPCION 1 (Con jQuery)

Este código requiere jQuery y ha sido probado y está trabajando con 1.7.2 - 3.2.1

Simple (Agregue este código jQuery a su archivo de script maestro y olvídelo).

$(''textarea'').each(function () {
  this.setAttribute(''style'', ''height:'' + (this.scrollHeight) + ''px;overflow-y:hidden;'');
}).on(''input'', function () {
  this.style.height = ''auto'';
  this.style.height = (this.scrollHeight) + ''px'';
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT.
This javascript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>

Prueba en jsfiddle

OPCION 2 (JavaScript puro)

Simple (agrega este JavaScript a tu archivo de script maestro y olvídalo)

var tx = document.getElementsByTagName(''textarea'');
for (var i = 0; i < tx.length; i++) {
  tx[i].setAttribute(''style'', ''height:'' + (tx[i].scrollHeight) + ''px;overflow-y:hidden;'');
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = ''auto'';
  this.style.height = (this.scrollHeight) + ''px'';
}

<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>

Prueba en jsfiddle

OPCIÓN 3 (extensión jQuery)

Útil si desea aplicar un mayor encadenamiento a las áreas de texto que desea que sean de tamaño automático.

jQuery.fn.extend({
  autoHeight: function () {
    function autoHeight_(element) {
      return jQuery(element)
        .css({ ''height'': ''auto'', ''overflow-y'': ''hidden'' })
        .height(element.scrollHeight);
    }
    return this.each(function() {
      autoHeight_(this).on(''input'', function() {
        autoHeight_(this);
      });
    });
  }
});

Invoque con $(''textarea'').autoHeight()

ACTUALIZANDO TEXTAREA A TRAVÉS DE JAVASCRIPT

Al inyectar contenido en un área de texto a través de JavaScript, agregue el siguiente código para invocar la función en la opción 1.

$(''textarea'').trigger(''input'');

Answer 2

¿Alguien ha considerado contentable? No pierdas el tiempo con el desplazamiento, y el único JS que me gusta es si planeas guardar los datos de forma borrosa ... y al parecer, es compatible con todos los navegadores populares: http://caniuse.com/#feat=contenteditable

Simplemente ajústelo para que se vea como un cuadro de texto, y se auto-dimensiona ... Convierta su altura mínima en la altura de texto preferida y téngala.

Lo bueno de este enfoque es que puede guardar y etiquetas en algunos de los navegadores.

http://jsfiddle.net/gbutiri/v31o8xfo/

<style>
.autoheight {
    min-height: 16px;
    font-size: 16px;
    margin: 0;
    padding: 10px;
    font-family: Arial;
    line-height: 16px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    resize: none;
    border: 1px solid #ccc;
    outline: none;
    width: 200px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).on(''blur'',''.autoheight'',function(e) {
    var $this = $(this);
    // The text is here. Do whatever you want with it.
    console.log($this.html());
});

</script>
<div class="autoheight contenteditable" contenteditable="true">Mickey Mouse</div>

Answer 3

Algunas de las respuestas aquí no tienen en cuenta el relleno.

Asumiendo que tienes un máximo. Si no quieres repasar, esto funcionó para mí:

    // obviously requires jQuery

    // element is the textarea DOM node

    var $el = $(element);
    // inner height is height + padding
    // outerHeight includes border (and possibly margins too?)
    var padding = $el.innerHeight() - $el.height();
    var originalHeight = $el.height();

    // XXX: Don''t leave this hardcoded
    var maxHeight = 300;

    var adjust = function() {
        // reset it to the original height so that scrollHeight makes sense
        $el.height(originalHeight);

        // this is the desired height (adjusted to content size)
        var height = element.scrollHeight - padding;

        // If you don''t want a maxHeight, you can ignore this
        height = Math.min(height, maxHeight);

        // Set the height to the new adjusted height
        $el.height(height);
    }

    // The input event only works on modern browsers
    element.addEventListener(''input'', adjust);

Answer 4

Aquí hay una directiva angularjs para la respuesta de panzi.

 module.directive(''autoHeight'', function() {
        return {
            restrict: ''A'',
            link: function(scope, element, attrs) {
                element = element[0];
                var resize = function(){
                    element.style.height = ''auto'';
                    element.style.height = (element.scrollHeight)+''px'';
                };
                element.addEventListener(''change'', resize, false);
                element.addEventListener(''cut'',    resize, false);
                element.addEventListener(''paste'',  resize, false);
                element.addEventListener(''drop'',   resize, false);
                element.addEventListener(''keydown'',resize, false);

                setTimeout(resize, 100);
            }
        };
    });

HTML:

<textarea ng-model="foo" auto-height></textarea>

Answer 5

Como un enfoque diferente, puede utilizar un <span> que ajusta su tamaño automáticamente. Necesitará hacerlo editable agregando la propiedad contenteditable="true" y listo:

div {
  width: 200px;
}

span {
  border: 1px solid #000;
  padding: 5px;
}

<div>
  <span contenteditable="true">This text can be edited by the user</span>
</div>

El único problema con este enfoque es que si desea enviar el valor como parte del formulario, deberá hacerlo usted mismo en JavaScript. Hacerlo es relativamente fácil. Por ejemplo, puede agregar un campo oculto y, en el evento onsubmit del formulario, asigne el valor del span al campo oculto que luego se enviará automáticamente con el formulario.

Answer 6

Conozco una forma breve y correcta de implementar esto con jquery. No se necesitan divs ocultos adicionales y funciona en la mayoría de los navegadores

<script type="text/javascript">$(function(){
$("textarea").live("keyup keydown",function(){
var h=$(this);
h.height(60).height(h[0].scrollHeight);//where 60 is minimum height of textarea
});});

</script>

Answer 7

Está utilizando el valor más alto de clientHeight actual y el contenido scrollHeight. Cuando reduce el scrollHeight eliminando contenido, el área calculada no puede reducirse porque el clienteHeight, previamente establecido por style.height, lo mantiene abierto. En su lugar, puede tomar un máximo () de scrollHeight y un valor de altura mínima que haya predefinido o calculado a partir de textarea.rows.

En general, probablemente no debería confiar en scrollHeight en los controles de formulario. Aparte de que scrollHeight es tradicionalmente menos compatible que algunas de las otras extensiones de IE, HTML / CSS no dice nada acerca de cómo se implementan los controles de formulario internamente y no se garantiza que scrollHeight sea algo significativo. (Tradicionalmente, algunos navegadores han utilizado widgets de SO para la tarea, lo que hace imposible la interacción entre CSS y DOM en sus partes internas). Al menos, huela la existencia de scrollHeight / clientHeight antes de intentar habilitar el efecto.

Otro posible enfoque alternativo para evitar el problema, si es importante que funcione más ampliamente, podría ser usar un div oculto del mismo ancho que el área de texto y establecerlo en la misma fuente. En keyup, usted copia el texto del área de texto a un nodo de texto en div oculto (recuerde reemplazar ''/ n'' con un salto de línea y escape ''<'' / ''&'' correctamente si está usando innerHTML). Luego, simplemente midiendo el offsetHeight del div te dará la altura que necesitas.

Answer 8

Este código funciona para pegar y seleccionar eliminar también.

onKeyPressTextMessage = function(){
   var textArea = event.currentTarget;
     textArea.style.height = ''auto'';
     textArea.style.height = textArea.scrollHeight + ''px'';
};

<textarea onkeyup="onKeyPressTextMessage(event)" name="welcomeContentTmpl" id="welcomeContent" onblur="onblurWelcomeTitle(event)" rows="2" cols="40" maxlength="320"></textarea>

Aquí está el JSFiddle

Answer 9

Esto es lo que hice mientras usaba MVC HTML Helper para TextArea. Tenía bastantes elementos de textarea, así que tuve que distinguirlos usando Model Id.

 @Html.TextAreaFor(m => m.Text, 2, 1, new { id = "text" + Model.Id, onkeyup = "resizeTextBox(" + Model.Id + ");" })

y en el guión agregó esto:

   function resizeTextBox(ID) {            
        var text = document.getElementById(''text'' + ID);
        text.style.height = ''auto'';
        text.style.height = text.scrollHeight + ''px'';            
    }

Lo he probado en IE10 y Firefox23

Answer 10

Esto me funciona (Firefox 3.6 / 4.0 y Chrome 10/11):

var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent(''on''+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById(''text'');
    function resize () {
        text.style.height = ''auto'';
        text.style.height = text.scrollHeight+''px'';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, ''change'',  resize);
    observe(text, ''cut'',     delayedResize);
    observe(text, ''paste'',   delayedResize);
    observe(text, ''drop'',    delayedResize);
    observe(text, ''keydown'', delayedResize);

    text.focus();
    text.select();
    resize();
}

textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
}

<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>

Si quieres probarlo en jsfiddle , comienza con una sola línea y crece solo la cantidad exacta necesaria. Está bien para un solo área de textarea , pero quería escribir algo en el que tendría muchos muchos de esos temas (casi tanto como uno tendría líneas en un documento de texto grande). En ese caso es muy lento. (En Firefox es increíblemente lento). Entonces, realmente me gustaría un enfoque que use CSS puro. Esto sería posible con contenteditable , pero quiero que sea solo de texto plano.

Answer 11

Hay un enfoque ligeramente diferente.

<div style="position: relative">
  <pre style="white-space: pre-wrap; word-wrap: break-word"></pre>
  <textarea style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"></textarea>
</div>

La idea es copiar el texto de textarea en el pre y dejar que CSS se asegure de que tengan el mismo tamaño.

El beneficio es que los marcos presentan herramientas simples para mover texto sin tocar ningún evento. Es decir, en AngularJS usted agregaría un ng-model="foo" ng-trim="false" al área de textarea y ng-bind="foo + ''/n''" a la pre . Ver un fiddle .

Solo asegúrate de que pre tenga el mismo tamaño de fuente que el área de textarea .

Answer 12

La mejor solución (funciona y es corta) para mi es:

    $(document).on(''input'', ''textarea'', function () {
        $(this).outerHeight(38).outerHeight(this.scrollHeight); // 38 or ''1em'' -min-height
    }); 

Funciona como un amuleto sin parpadear con pegar (también con el mouse), cortar, ingresar y se reduce al tamaño correcto.

Por favor, eche un vistazo a jsFiddle .

Answer 13

La solución jQuery ajusta el css para satisfacer sus necesidades.

css ...

div#container textarea {
    min-width: 270px;
    width: 270px;
    height: 22px;
    line-height: 24px;
    min-height: 22px;
    overflow-y: hidden; /* fixes scrollbar flash - kudos to @brettjonesdev */
    padding-top: 1.1em; /* fixes text jump on Enter keypress */
}

javascript ...

// auto adjust the height of
$(''#container'').delegate( ''textarea'', ''keydown'', function (){
    $(this).height( 0 );
    $(this).height( this.scrollHeight );
});
$(''#container'').find( ''textarea'' ).keydown();

O alternativa para jQuery 1.7 + ...

// auto adjust the height of
$(''#container'').on( ''keyup'', ''textarea'', function (){
    $(this).height( 0 );
    $(this).height( this.scrollHeight );
});
$(''#container'').find( ''textarea'' ).keyup();

He creado un violín con el estilo mínimo absoluto como punto de partida para tus experimentos ... http://jsfiddle.net/53eAy/951/

Answer 14

Lo siguiente funciona para cortar, pegar, etc., independientemente de si esas acciones son del mouse, un atajo de teclado, seleccionar una opción de una barra de menú ... varias respuestas tienen un enfoque similar pero no tienen en cuenta el cuadro Tamaño, razón por la cual aplican incorrectamente el overflow: hidden estilo overflow: hidden .

Hago lo siguiente, que también funciona bien con max-height y rows para la altura máxima y mínima.

function adjust() {
  var style = this.currentStyle || window.getComputedStyle(this);
  var boxSizing = style.boxSizing === ''border-box''
      ? parseInt(style.borderBottomWidth, 10) +
        parseInt(style.borderTopWidth, 10)
      : 0;
  this.style.height = '''';
  this.style.height = (this.scrollHeight + boxSizing) + ''px'';
};

var textarea = document.getElementById("ta");
if (''onpropertychange'' in textarea) { // IE
  textarea.onpropertychange = adjust;
} else if (''oninput'' in textarea) {
  textarea.oninput = adjust;
}
setTimeout(adjust.bind(textarea));

textarea {
  resize: none;
  max-height: 150px;
  border: 1px solid #999;
  outline: none;
  font: 18px sans-serif;
  color: #333;
  width: 100%;
  padding: 8px 14px;
  box-sizing: border-box;
}

<textarea rows="3" id="ta">
Try adding several lines to this.
</textarea>

Para una completa integridad, debe llamar a la función de adjust en algunas circunstancias más:

1. Los eventos de cambio de tamaño de la ventana, si el ancho del área de textarea cambia con el tamaño de la ventana, u otros eventos que cambian el ancho del área de texto
2. Cuando cambia el atributo de estilo de display , por ejemplo, cuando pasa de none (oculto) a block
3. Cuando el valor del área de textarea se cambia programáticamente

Tenga en cuenta que el uso de window.getComputedStyle u obtener currentStyle puede ser algo costoso desde el punto de vista informático, por lo que es posible que desee almacenar el resultado en caché.

Funciona para IE6, así que realmente espero que sea un soporte suficientemente bueno.

Answer 15

No sé si alguien lo mencionó de esta manera, pero en algunos casos es posible cambiar el tamaño de la altura con filas Atributo

textarea.setAttribute(''rows'',breaks);

Demo

Answer 16

Puedes usar este código:

Coffescript:

jQuery.fn.extend autoHeightTextarea: ->
  autoHeightTextarea_ = (element) ->
    jQuery(element).css(
      ''height'': ''auto''
      ''overflow-y'': ''hidden'').height element.scrollHeight

  @each ->
    autoHeightTextarea_(@).on ''input'', ->
      autoHeightTextarea_ @

$(''textarea_class_or_id`'').autoHeightTextarea()

Javascript

jQuery.fn.extend({
  autoHeightTextarea: function() {
    var autoHeightTextarea_;
    autoHeightTextarea_ = function(element) {
      return jQuery(element).css({
        ''height'': ''auto'',
        ''overflow-y'': ''hidden''
      }).height(element.scrollHeight);
    };
    return this.each(function() {
      return autoHeightTextarea_(this).on(''input'', function() {
        return autoHeightTextarea_(this);
      });
    });
  }
});

$(''textarea_class_or_id`'').autoHeightTextarea();

Answer 17

Si no necesita ser compatible con IE8, puede usar el evento de input :

var resizingTextareas = [].slice.call(document.querySelectorAll(''textarea[autoresize]''));

resizingTextareas.forEach(function(textarea) {
  textarea.addEventListener(''input'', autoresize, false);
});

function autoresize() {
  this.style.height = ''auto'';
  this.style.height = this.scrollHeight+''px'';
  this.scrollTop = this.scrollHeight;
  window.scrollTo(window.scrollLeft,(this.scrollTop+this.scrollHeight));
}

Ahora solo necesitas agregar algo de CSS y listo:

textarea[autoresize] {
  display: block;
  overflow: hidden;
  resize: none;
}

Uso:

<textarea autoresize>Type here and I’ll resize.</textarea>

Puedes leer más sobre cómo funciona en mi blog .

Answer 18

Solo usa <pre> </pre> con algunos estilos como:

    pre {
        font-family: Arial, Helvetica, sans-serif;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-size: 12px;
        line-height: 16px;
    }

Answer 19

Un enfoque aún más simple y limpio es este:

// adjust height of textarea.auto-height
$(document).on( ''keyup'', ''textarea.auto-height'', function (e){
    $(this).css(''height'', ''auto'' ); // you can have this here or declared in CSS instead
    $(this).height( this.scrollHeight );
}).keyup();

// y el CSS

textarea.auto-height {
    resize: vertical;
    max-height: 600px; /* set as you need it */
    height: auto;      /* can be set here of in JS */
    overflow-y: auto;
    word-wrap:break-word
}

Todo lo que se necesita es agregar la clase .auto-height a cualquier área de textarea que desee apuntar.

Probado en FF, Chrome y Safari. Déjame saber si esto no funciona para ti, por alguna razón. Pero, esta es la forma más limpia y sencilla en la que he encontrado que funciona. ¡Y funciona genial! :RE

Answer 20

Un poco de correcciones. Funciona perfectamente en la ópera.

  $(''textarea'').bind(''keyup keypress'', function() {
      $(this).height('''');
      var brCount = this.value.split(''/n'').length;
      this.rows = brCount+1; //++ To remove twitching
      var areaH = this.scrollHeight,
          lineHeight = $(this).css(''line-height'').replace(''px'',''''),
          calcRows = Math.floor(areaH/lineHeight);
      this.rows = calcRows;
  });

Answer 21

Utilicé el siguiente código para múltiples áreas de texto. Funcionando bien en Chrome 12, Firefox 5 e IE 9, incluso con las acciones de eliminar, cortar y pegar realizadas en las áreas de texto.

<!-- language: lang-html -->
<style type=''text/css''>
textarea { border:0 none; overflow:hidden; outline:none; background-color:#eee }
</style>
<textarea style=''height:100px;font-family:arial'' id="txt1"></textarea>
<textarea style=''height:125px;font-family:arial'' id="txt2"></textarea>
<textarea style=''height:150px;font-family:arial'' id="txt3"></textarea>
<textarea style=''height:175px;font-family:arial'' id="txt4"></textarea>
<script type=''text/javascript''>
function attachAutoResizeEvents()
{   for(i=1;i<=4;i++)
    {   var txtX=document.getElementById(''txt''+i)
        var minH=txtX.style.height.substr(0,txtX.style.height.indexOf(''px''))
        txtX.onchange=new Function("resize(this,"+minH+")")
        txtX.onkeyup=new Function("resize(this,"+minH+")")
        txtX.onchange(txtX,minH)
    }
}
function resize(txtX,minH)
{   txtX.style.height = ''auto'' // required when delete, cut or paste is performed
    txtX.style.height = txtX.scrollHeight+''px''
    if(txtX.scrollHeight<=minH)
        txtX.style.height = minH+''px''
}
window.onload=attachAutoResizeEvents
</script>

Answer 22

tamaño automático

https://github.com/jackmoore/autosize

Just works, standalone, es popular (3.0k + estrellas de GitHub a partir de octubre de 2018), disponible en cdnjs ) y ligero (~ 3.5k). Manifestación:

<textarea id="autosize" style="width:200px;">a
J   b
c</textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js"></script>
<script>autosize(document.querySelectorAll(''#autosize''));</script>

Por cierto, si está utilizando el editor ACE, use maxLines: Infinity : ajuste automáticamente la altura al contenido en el editor Ace Cloud 9

Answer 23

MakeTextAreaResisable que utiliza qQuery

function MakeTextAreaResisable(id) {
    var o = $(id);
    o.css("overflow-y", "hidden");

    function ResizeTextArea() {
        o.height(''auto'');
        o.height(o[0].scrollHeight);
    }

    o.on(''change'', function (e) {
        ResizeTextArea();
    });

    o.on(''cut paste drop keydown'', function (e) {
        window.setTimeout(ResizeTextArea, 0);
    });

    o.focus();
    o.select();
    ResizeTextArea();
}

Answer 24

Para aquellos que desean que el área de texto se redimensione automáticamente tanto en ancho como en alto:

HTML:

<textarea class=''textbox''></textarea>
<div>
  <span class=''tmp_textbox''></span>
</div>

CSS:

.textbox,
.tmp_textbox {
  font-family: ''Arial'';
  font-size: 12px;
  resize: none;
  overflow:hidden;
}

.tmp_textbox {
  display: none;
}

jQuery:

$(function(){
  //alert($(''.textbox'').css(''padding''))
  $(''.textbox'').on(''keyup change'', checkSize)
  $(''.textbox'').trigger(''keyup'')

  function checkSize(){
    var str = $(this).val().replace(//r?/n/g, ''<br/>'');
    $(''.tmp_textbox'').html( str )
    console.log($(this).val())

    var strArr = str.split(''<br/>'')
    var row = strArr.length
    $(''.textbox'').attr(''rows'', row)
    $(''.textbox'').width( $(''.tmp_textbox'').width() + parseInt($(''.textbox'').css(''padding'')) * 2 + 10 )
  }
})

Codepen:

http://codepen.io/anon/pen/yNpvJJ

Aclamaciones,

Answer 25

Puede usar este fragmento de código para calcular el número de filas que necesita un área de texto:

textarea.rows = 1;
    if (textarea.scrollHeight > textarea.clientHeight)
      textarea.rows = textarea.scrollHeight / textarea.clientHeight;

Calcúlelo inputy los window:resizeeventos para obtener un efecto de cambio de tamaño automático. Ejemplo en Angular:

Código de plantilla:

<textarea rows="1" reAutoWrap></textarea>

auto-wrap.directive.ts

import { Directive, ElementRef, HostListener } from ''@angular/core'';

@Directive({
  selector: ''textarea[reAutoWrap]'',
})
export class AutoWrapDirective {

  private readonly textarea: HTMLTextAreaElement;

  constructor(el: ElementRef) {
    this.textarea = el.nativeElement;
  }

  @HostListener(''input'') onInput() {
    this.resize();
  }

  @HostListener(''window:resize'') onChange() {
    this.resize();
  }

  private resize() {
    this.textarea.rows = 1;
    if (this.textarea.scrollHeight > this.textarea.clientHeight)
      this.textarea.rows = this.textarea.scrollHeight / this.textarea.clientHeight;
  }

}

Answer 26

Solución nativa de Javascript sin parpadeo en Firefox y más rápido que el método withclientHeight ...

1) Añadir div.textareaselector a todos sus selectores que contienen textarea. No olvides añadirbox-sizing: border-box;

2) Incluir este script:

function resizeAll()
{
   var textarea=document.querySelectorAll(''textarea'');
   for(var i=textarea.length-1; i>=0; i--)
      resize(textarea[i]);
}

function resize(textarea)
{
   var div = document.createElement("div");
   div.setAttribute("class","textarea");
   div.innerText=textarea.value+"/r/n";
   div.setAttribute("style","width:"+textarea.offsetWidth+''px;display:block;height:auto;left:0px;top:0px;position:fixed;z-index:-200;visibility:hidden;word-wrap:break-word;overflow:hidden;'');
   textarea.form.appendChild(div);
   var h=div.offsetHeight;
   div.parentNode.removeChild(div);
   textarea.style.height=h+''px'';
}

function resizeOnInput(e)
{
   var textarea=document.querySelectorAll(''textarea'');
   for(var i=textarea.length-1; i>=0; i--)
      textarea[i].addEventListener("input",function(e){resize(e.target); return false;},false);
}

window.addEventListener("resize",function(){resizeAll();}, false);
window.addEventListener("load",function(){resizeAll();}, false);
resizeOnInput();

Probado en IE11, Firefox y Chrome.

Esta solución crea una división similar a tu área de texto, incluido el texto interno y la altura de las medidas.

Answer 27

He probado el script en navegadores comunes, y falló en Chrome y Safari. Es debido a la variable scrollHeight constantemente actualizable.

He aplicado el script DisgruntledGoat usando jQuery y he agregado chrome fix

function fitToContent(/* JQuery */text, /* Number */maxHeight) {
    var adjustedHeight = text.height();
    var relative_error = parseInt(text.attr(''relative_error''));
    if (!maxHeight || maxHeight > adjustedHeight) {
        adjustedHeight = Math.max(text[0].scrollHeight, adjustedHeight);
        if (maxHeight)
            adjustedHeight = Math.min(maxHeight, adjustedHeight);
        if ((adjustedHeight - relative_error) > text.height()) {
            text.css(''height'', (adjustedHeight - relative_error) + "px");
            // chrome fix
            if (text[0].scrollHeight != adjustedHeight) {
                var relative = text[0].scrollHeight - adjustedHeight;
                if (relative_error != relative) {
                    text.attr(''relative_error'', relative + relative_error);
                }
            }
        }
    }
}

function autoResizeText(/* Number */maxHeight) {
    var resize = function() {
        fitToContent($(this), maxHeight);
    };
    $("textarea").attr(''relative_error'', 0);
    $("textarea").each(resize);
    $("textarea").keyup(resize).keydown(resize);
}

Answer 28

La solución de jQuery es establecer la altura del área de texto en ''auto'', verificar el scrollHeight y luego adaptar la altura del área de texto a cada vez que cambie la zona de texto ( JSFiddle ):

$(''textarea'').on( ''input'', function(){
    $(this).height( ''auto'' ).height( this.scrollHeight );
});

Si agrega dinámicamente áreas de texto (a través de AJAX o lo que sea), puede agregar esto en su $ (documento). Listo para asegurarse de que todas las áreas de texto con clase ''autoight'' se mantengan a la misma altura que su contenido:

$(document).on( ''input'', ''textarea.autoheight'', function() {
    $(this).height( ''auto'' ).height( this.scrollHeight );
});

Probado y trabajando en Chrome, Firefox, Opera e IE. También soporta cortar y pegar, palabras largas, etc.

Answer 29

Ninguna de las respuestas parece funcionar. Pero este funciona para mí: https://coderwall.com/p/imkqoq/resize-textarea-to-fit-content

$(''#content'').on( ''change keyup keydown paste cut'', ''textarea'', function (){
    $(this).height(0).height(this.scrollHeight);
}).find( ''textarea'' ).change();

Answer 30

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Textarea autoresize</title>
    <style>
    textarea {
        overflow: hidden;
    }
    </style>
    <script>
    function resizeTextarea(ev) {
        this.style.height = ''24px'';
        this.style.height = this.scrollHeight + 12 + ''px'';
    }

    var te = document.querySelector(''textarea'');
    te.addEventListener(''input'', resizeTextarea);
    </script>
</head>
<body>
    <textarea></textarea>
</body>
</html>

Probado en Firefox 14 y Chromium 18. Los números 24 y 12 son arbitrarios, pruebe para ver cuál le conviene mejor.

Podría prescindir de las etiquetas de estilo y de secuencia de comandos, pero se vuelve un poco desordenada (esto es HTML de estilo antiguo + JS y no se recomienda).

<textarea style="overflow: hidden" onkeyup="this.style.height=''24px''; this.style.height = this.scrollHeight + 12 + ''px'';"></textarea>

Edición: código modernizado. Se modificó el atributo onkeyup para addEventListener.
Editar: keydown funciona mejor que keyup
Editar: declarar la función antes de usar
Edición: la entrada funciona mejor que keydown (thnx @ WASD42 & @ MA-Maddin)

jsfiddle