一对文本区域根据文本输入自动增长和缩小

Posted 2023-05-07

【中文标题】一对文本区域根据文本输入自动增长和缩小

【英文标题】：A pair of textareas to auto grow and shrink based on text entry into one

【发布时间】：2022-01-19 17:42:18

【问题描述】：

我有两个<textarea>s，一个可编辑ta2 一个不是ta1。它们都需要在文本输入到可编辑文本时展开，并在删除文本时缩小。

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

事件处理程序：

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;
  

当在 ta2 中输入更多文本时，一旦 ta2 的大小超过 ta1，它们都会开始扩展。 但是，在删除文本时，我遇到了一个问题：尽管 ta2 中还有更多文本，但每隔一次删除它就会跳回 ta1 的大小。这是因为将它们设置为相同的高度然后退格。我不知道如何解决这个问题。

【参考方案1】：

自动调整大小的来源：Creating a textarea with auto-resize

选项 2（纯 JavaScript）

简单 （将此 javascript 添加到您的主脚本文件中，然后忘记它。）

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

为您提供示例代码！

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>