• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

224
Vistas
¿Cómo usar javascript para limitar el área de texto puede aumentar dinámicamente la altura y limitar la altura máxima?

Me he encontrado con una dificultad y no sé cómo solucionarla. Espero que todos me puedan ayudar un poco!

¡El problema es este!

Estoy haciendo un área de texto. Espero que la altura del cuadro de entrada sea de 36 px al principio, pero si se continúa ingresando el texto, la altura del cuadro de entrada se puede aumentar a 72 px, pero la altura máxima es de 72 px, y no aumentará con el aumento de texto. ¡alto!

Lo anterior es lo que quiero lograr, porque recién estoy aprendiendo el programa, no sé si esto se puede hacer a través de CSS o necesito usar javascript. ¿Cómo lograr este requisito a través de javascript?

Gracias a todos por atender mi pregunta y por ayudarme. Gracias a todos.

 body { min-height: 100vh; display: flex; justify-content: center; align-items: center; } .demo { width: 600px; padding: 16px; border: 1px solid #222; } .demo .tool { display: flex; list-style-type:none; } .demo .tool li { padding: 16px; background-color: #ccc; border: 1px solid #222; } .demo .chat { margin-top: 16px; width: 600px; height: 36px; } .demo .tool__footer { margin: 16px; } .demo .tool__footer .send { text-decoration: none; padding: 8px; background-color: #f9cf5a; color: #222; border-radius: 6px; }
 <div class="demo"> <div class="wrap"> <ul class="tool"> <li>photo</li> <li>file</li> <li>example</li> </ul> <textarea class="chat"></textarea> <div class="tool__footer"> <input type="checkbox" id="enter"><label for="enter">ENTER</label> <a type="text" class="send" href="javascript:;">send</a> </div> </div> </div>

ingrese la descripción de la imagen aquí

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Una solución simple usando el número de saltos de línea:

 function newHeight(value) { let linebreaks = (value.match(/\n/g) || []).length-1 // min-height + (lines * line-height) + padding + border let height = 36 + (linebreaks * 20) return height; } let textarea = document.querySelector(".chat"); textarea.addEventListener("input", () => { let height = newHeight(textarea.value); // If less that 36 set 36 if (height<36){ textarea.style.height = '36px' } else { // Else set height until it reaches 72 px textarea.style.height = height >72 ?"72px" :height + "px"; } });
 .chat{ height:36px; /* A transition to make it smoother */ transition:all 0.2s; }
 <!-- You can use wrap="off" which will make rows=newlines --> <textarea wrap="off" class="chat"></textarea>

almost 3 years ago · Juan Pablo Isaza Denunciar

0

Solución

Puede proporcionar un controlador de eventos de oninput simple (inspirado en https://stackoverflow.com/a/48460773/5312110 ) que cambia el tamaño de su área de texto en cada nueva entrada:

 <textarea class="chat" oninput="this.style.height = ''; this.style.height = Math.min(this.scrollHeight - 4, 72) + 'px'"></textarea>

Explicación

En cada entrada, la altura se establece como el mínimo de scrollHeight del área de texto (la cantidad de espacio que ocuparía el área de texto para mostrar completamente su contenido) y 72 píxeles. Dado que scrollHeight incluye el relleno del área de texto y la altura no, scrollHeight debe reducirse según la cantidad de relleno del área de texto antes de configurarlo como una nueva height . El relleno estándar para las áreas de texto parece ser de 2 píxeles (= 4 píxeles en total para la parte superior e inferior). Por lo tanto, debe usarse this.scrollHeight - 4 . Si el relleno fuera de 10 px, cambiaría a this.scrollHeight - 20 (= 2 x 10 px).

tu ejemplo

 body { min-height: 100vh; display: flex; justify-content: center; align-items: center; } .demo { width: 100%; padding: 16px; border: 1px solid #222; box-sizing: border-box; } .demo .tool { display: flex; list-style-type:none; } .demo .tool li { padding: 16px; background-color: #ccc; border: 1px solid #222; } .demo .chat { margin-top: 16px; width: 100%; height: 36px; } .demo .tool__footer { margin: 16px; } .demo .tool__footer .send { text-decoration: none; padding: 8px; background-color: #f9cf5a; color: #222; border-radius: 6px; }
 <div class="demo"> <div class="wrap"> <ul class="tool"> <li>photo</li> <li>file</li> <li>example</li> </ul> <textarea class="chat" oninput="this.style.height = ''; this.style.height = Math.min(this.scrollHeight - 4, 72) + 'px'"></textarea> <div class="tool__footer"> <input type="checkbox" id="enter"><label for="enter">ENTER</label> <a type="text" class="send" href="javascript:;">send</a> </div> </div> </div>

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda