Tengo un área de texto que se expande automáticamente. Pero al hacer clic en el botón Enviar, el área de texto no vuelve a la altura original. He incluido un código de muestra. En el proyecto, se implementa usando react. ¿Hay alguna forma de hacer que la altura del área de texto sea "50px" al hacer clic en el botón Enviar? Gracias
var textarea = document.querySelector('textarea'); textarea.addEventListener('keydown', autosize); function autosize() { var el = this; setTimeout(function() { el.style.cssText = 'height:auto; padding:0'; el.style.cssText = 'height:' + el.scrollHeight + 'px'; }, 0); } .textarea { overflow: hidden; padding: 10px; width: 250px; font-size: 14px; margin: 50px auto; display: block; border-radius: 10px; border: 6px solid #556677; } <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> </head> <body> <div class="container-fluid pl-5"> <div class="row w-70 text-center"> <textarea rows='1' placeholder='Auto-Expanding Textarea'></textarea> </div> <button class="send-btn" onClick={()=> messageSendHandler()}>send</button> </div> </body> </html>No veo la descripción de la función messageSendHandler() adjunta a su publicación. ¿Se borra el campo de área de texto? Si es así, cuando sucede, el evento keydown no ocurre y, por lo tanto, la función autosize() no se activa. Entonces, puedo ver estas 2 formas para elegir:
autosize() en el envío del formulario, reemplace el evento keydown con el evento de input : es más universal y puede ayudar con diferentes tipos de entrada (como el dictado),messageSendHandler() ), de manera similar a como lo hace aquí: el.style.cssText = 'height:' + el.scrollHeight + 'px';
Además, alternativamente, tal vez esta URL de trucos CSS pueda brindarle más inspiración sobre el tema.