Tengo dos <textarea> s, uno editable ta2 uno no es ta1 . Ambos deben expandirse a medida que se ingresa texto en el editable y reducirse cuando se elimina texto.
<div class="items-center p-2 align-top" v-if="isFirstColumn(index)" > <textarea class="resize-none" id="ta1" cols="30" rows="5" v-model="row.value" readonly="true" /> </div> <span v-else> <textarea @input="autoGrow($event.target)" class="resize-none" id="ta2" cols="30" rows="5" v-model="row.value" /> </span>El controlador de eventos:
private autoGrow(element) { if ((element.scrollHeight)+'px' > (document.getElementById('ta1') as HTMLTextAreaElement).style.height) { element.style.height = 'auto'; element.style.height = (element.scrollHeight)+'px'; (document.getElementById('ta1') as HTMLTextAreaElement).style.height = 'auto'; (document.getElementById('ta1') as HTMLTextAreaElement).style.height = (element.scrollHeight)+'px'; } else{ (document.getElementById('ta1') as HTMLTextAreaElement).style.height = 'auto'; (document.getElementById('ta1') as HTMLTextAreaElement).style.height = ((document.getElementById('ta1') as HTMLTextAreaElement).scrollHeight)+'px'; element.style.height = (document.getElementById('ta1') as HTMLTextAreaElement).style.height; } }Al ingresar más texto en ta2, una vez que ta2 supere el tamaño de ta1, ambos comenzarán a expandirse. Sin embargo, al eliminar texto tengo un problema: a pesar de que aún hay mucho más texto en ta2, volverá al tamaño de ta1 cada dos veces que se elimine. Esto se debe a la configuración de ambos a la misma altura y luego al retroceso. No puedo encontrar la manera de resolver esto.
Fuente para tamaño automático: creación de un área de texto con cambio de tamaño automático
Simple (Agregue este JavaScript a su archivo de script maestro y olvídese de él).
const tx = document.getElementsByTagName("textarea"); for (let i = 0; i < tx.length; i++) { tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;"); tx[i].addEventListener("input", OnInput, false); } function OnInput() { this.style.height = "auto"; this.style.height = (this.scrollHeight) + "px"; }¡Código de ejemplo para ti!
const tx = document.getElementsByTagName("textarea"); for (let i = 0; i < tx.length; i++) { tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;"); tx[i].addEventListener("input", OnInput, false); } function OnInput() { this.style.height = "auto"; this.style.height = (this.scrollHeight) + "px"; } <div class="items-center p-2 align-top" v-if="isFirstColumn(index)"> <textarea class="resize-none" id="ta1" cols="30" v-model="row.value" readonly="true"></textarea> </div> <span v-else> <textarea class="resize-none" id="ta2" cols="30" v-model="row.value"></textarea> </span>