0

I've got two <textarea>s, one editable ta2 one is not ta1. They both need to expand as text is entered into the editable one, and shrink when text is removed.

    <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>

The event handler:

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;
  }
}

When entering more text into ta2, once ta2 surpasses ta1 in size they will both start expanding. However, when deleting text I have an issue: Despite there still being much more text in ta2, it will jump back to ta1's size every other deletion. This is because of setting them both to the same height and then backspacing. I cant figure out how to resolve this.

Zyzyx
  • 492
  • 4
  • 18

1 Answers1

1

Source for autoresize: Creating a textarea with auto-resize

OPTION 2 (Pure JavaScript)

Simple (Add this JavaScript to your master script file and forget about it.)

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";
}

Example code for you! 

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>
Allancoding
  • 529
  • 5
  • 15