0
308
Views¿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> 
2 answers
Answer question0
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>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>