创建具有自动调整宽度和恒定高度的文本区域

Question

我正在尝试设置一个简单的表单，其特点是如果用户输入的文本比textarea 宽，它将自动调整大小。需要明确的是，我希望拥有与 contenteditable="true" 属性相同的行为 span 标记。

        <form action="/form" method="POST" style="margin-top: 100px;">
      <p>
          My name is <textarea name="name" cols="10" rows="1" placeholder="enter name"></textarea> and I come from a village called <textarea name="village" cols="10" rows="1" placeholder="enter village"></textarea> 
          . Everybody from the village of <textarea cols="10" rows="1" placeholder="enter village"></textarea> knows that my name is <textarea cols="10" rows="1" placeholder="enter name"></textarea> 
      </p>
      <p>
      <button type="submit" class="btn btn-primary">Submit</button>
  </form>

I found a very similar question for the height of a textarea 所以我只是尝试让 js 代码适应宽度。不幸的是，它确实适用于高度（见图）但不适用于宽度。我错过了什么？

<script>
const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute("style", "width:" + (tx[i].scrollWidth) + "px;overflow-x:hidden;");
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.width = "auto";
  this.style.width = (this.scrollWidth) + "px";
}
</script>

Answer 1

我认为最好的解决方案是像你提到的那样实际使用contenteditable="true"。

这样的事情应该可以工作：

<form action="/form" method="POST" onsubmit="return copyValues()" style="margin-top: 100px;">
      <p>
          My name is <span contenteditable="true" id="name">enter name</span> and I come from a village called <span contenteditable="true" id="village">enter name</span> 
          . Everybody from the village of <span contenteditable="true" id="otherVillageName"></span> knows that my name is <span contenteditable="true" id="pseudonym">enter name</span> 
      </p>
      <p>
      <input type="hidden" id="nameInput" name="name" />
      <input type="hidden" id="villageInput" name="village" />
      <input type="hidden" id="otherVillageInput" name="otherVillage" />
      <input type="hidden" id="pseudonymInput" name="pseudonym" />
      <button type="submit" class="btn btn-primary">Submit</button>
</form>

<script>
    function copyValues () {
        document.getElementById("nameInput").value =  
        document.getElementById("name").innerHTML;
        document.getElementById("villageInput").value =  
        document.getElementById("village").innerHTML;
        document.getElementById("otherVillageInput").value =  
        document.getElementById("otherVillage").innerHTML;
        document.getElementById("pseudonymInput").value =  
        document.getElementById("pseudonym").innerHTML;
        return true;
    }
</script>

注意：用户必须选择并删除文本，为此您可以添加一个 onfocus="clearPlaceholder(this)"，它将元素传递给一个函数，您可以在其中检查 innerHTML 是否为“输入名称”并清除它，但是它有点繁琐，超出了这个问题的范围。