Estoy usando textarea donde podemos escribir lo que queramos, usando Bootstrap . Pero su altura está configurada en 3 filas de forma predeterminada. Quiero que sea flexible. A medida que el usuario va más allá de 3 filas, quiero que se expanda el área de texto. En su lugar, aparece una barra de desplazamiento . Lo sé, el área de texto responde, el usuario puede arrastrarla y cambiar su tamaño. Pero, voy a agregar una opción de impresión donde el usuario puede obtener un pdf de lo que ha escrito. Por lo tanto, la función de fila limitada es un obstáculo.
Aquí está mi código:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <title>Index</title> </head> <body> <div class="container"> <div class="container row text-center"> <div class="container col bg-primary text-light"><span style="font-size: 5rem;">S</span></div> </div> <div class="container row text-center"> <div class="container col bg-primary text-light"><span style="font-size: 2rem;">STRENGTHS</span></div> </div> <div class="container row text-center"> <div class="container col bg-primary text-light"><span style="font-size: 2rem;"> <form> <div class="form-group"> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> </form> </span></div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script> </body> </html>Creo que eso es lo que necesitas:
$(document).ready(function () { $('textarea').on('input', function () { this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px'; }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <textarea autocomplete="off" style="resize:none; overflow:hidden;"></textarea>