Creating a textarea with auto-resize width and constant height

Question

I am trying to setup a simple form with the particularity that if the user inputs a text that is wider than the textarea, this will automatically resize. To be clear, I would like to have the same behavior than the property contenteditable="true" in a span tag.

        <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 so I just tried to adapt the js code for the width. Unfortunately, it does work for the height (see picture) but not for the width. What am I missing?

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

Is there an issue with actually using `contenteditable="true"` in a span tag? If you need to post that data in the form you can either listen to the `input` event and update a hidden input or copy it across on submit. — Joe, Jun 17 '21 at 13:14
I tried doing enter village but I was not getting the variable so I assumed span tags were not possible in forms and that is why I tried with a textarea element. Can you show me how to use them? I think this would probably be the answer to my issues. — G. Macia, Jun 17 '21 at 13:16

Joe · Accepted Answer · 2021-06-17T14:10:15.247

I think the best solution is to actually use contenteditable="true" like you mentioned.

Something like this should work:

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

Note: the user will have to select and delete the text, for that you can add an onfocus="clearPlaceholder(this)" which will pass the element to a function where you can check if the innerHTML is "enter name" and clear it, however it's a bit fiddly and out of the scope of this question.

Thanks a lot! This was really not the main part of the question but is there a way to connect on type both names and villages. i.e. the user needs to input "name" or "location" in multiple forms. Regardless of where she enters that, all the other autocomplete with the same information. So name = pseudonym, village = otherVillage for me. — G. Macia, Jun 19 '21 at 18:10

Creating a textarea with auto-resize width and constant height

1 Answers1