Estoy tratando de hacer que un área de texto crezca automáticamente con Javascript. La lógica es bastante simple, y aquí está mi código de trabajo:
$("#message-box").on('keydown', function() { var scroll_height = $("#message-box").get(0).scrollHeight; $("#message-box").css('height', scroll_height + 'px'); }); #message-box { border: 1px solid #cccccc; width: 400px; min-height: 100px; padding: 5px; overflow: hidden; box-sizing: border-box; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="message-box"></textarea> Todo funciona muy bien, pero cuando elimino el box-sizing: border-box; propiedad, veo cosas raras. Con cada evento keydown, el área de texto crece automáticamente .
¿Cuál es la relación entre el crecimiento automático del área de texto y la propiedad box-sizing ?
EDITAR
Vea las demostraciones aquí:
Con la propiedad de tamaño de cuadro: http://52.90.45.189/aks/textarea-autogrow.html
Sin la propiedad de tamaño de cuadro: http://52.90.45.189/aks/textarea-autogrow-no-border-box.html
Puedo entender que scrollHeight aumenta en 10px cuando se elimina el tamaño del cuadro. Pero, ¿por qué el navegador agrega 10 píxeles adicionales cada vez que se presiona una tecla?
Esto sucede porque scrollHeight toma padding: 5px; como un contenido que aumenta la altura de desplazamiento del área de textarea
La propiedad de solo lectura Element.scrollHeight es una medida de la altura del contenido de un elemento, incluido el contenido no visible en la pantalla debido al desbordamiento.
El valor de scrollHeight es igual a la altura mínima que necesitaría el elemento para ajustar todo el contenido en el punto de vista sin utilizar una barra de desplazamiento vertical. Incluye el relleno del elemento, pero no su borde o margen.
Con la altura del área de texto del cuadro de borde es de 100 100px sin incluir el padding , por lo que la altura de desplazamiento es de 100 100px .
Con la altura del área de texto del cuadro de contenido es 100px + 10px según el comportamiento predeterminado del content-box por lo que la altura de desplazamiento es 110px , con cada área de texto presionada aumenta su altura en 10 px y también se actualiza la altura de desplazamiento.
Ver fragmento a continuación
$("#message-box").on('keydown', function() { console.log("height of teaxtare on keydown is " + $("#message-box").height() + "px"); var scroll_height = $("#message-box").get(0).scrollHeight; console.log("Scroll Height of textarea is " + scroll_height + "px"); $("#message-box").css('height', scroll_height + 'px'); console.log("After setting scroll_height as a height of teaxtare, teaxtare's height is " + $("#message-box").height() + "px"); }); #message-box { border: 1px solid #cccccc; width: 400px; min-height: 100px; padding: 5px; overflow: hidden; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <textarea id="message-box"></textarea>EDITAR
Digamos
S = 110px ( altura de scrollheight + padding:5px; )
H = Altura del área de texto.
Ahora presionas la tecla,
Key Event 1, S = 110px so H = 110px, ____ Key Event 2, S = 120 // 110px (which is increased height of textarea by this function ($("#message-box").css('height', scroll_height + 'px');)) + Padding (Which is 10px) H = 120px, ____ Key Event 3, S = 130 // 120px (which is increased height of textarea by this function ($("#message-box").css('height', scroll_height + 'px');)) + Padding (Which is 10px) H = 130px, And So OnEsta formación es una especie de bucle.
En tu JQuery, puedes usar:
this.style.height = "1px"; this.style.height = (this.scrollHeight) + "px";Por favor intenta lo siguiente:
$("#message-box").on('keydown', function() { this.style.height = "1px"; this.style.height = (this.scrollHeight) + "px"; }); #message-box { border: 1px solid #cccccc; width: 400px; min-height: 100px; padding: 5px; overflow: hidden; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="message-box"></textarea>En la primera iteración del bucle, la altura de CSS era scrollHeight 100px 110px . Estos dos son cosas diferentes. Nuevamente, en la segunda iteración del ciclo, scrollHeight era de 120px y la altura de CSS antes de la última línea de la función era de 110px . Después de la última línea, la altura de CSS cambió a 120px .
this.style.height = (this.scrollHeight) + "px"; scrollHeight es la altura real del elemento. La altura de CSS es la altura real con border-box y no con content-box .