title: Creating a textarea with auto-resize width and constant height
body: <p>I am trying to setup a simple form with the particularity that if the user inputs a text that is wider than the <code>textarea</code>, this will automatically resize. To be clear, I would like to have the same behavior than the property <code>contenteditable=&quot;true&quot;</code> in a <code>span</code> tag.</p>
  <pre><code>        &lt;form action=&quot;/form&quot; method=&quot;POST&quot; style=&quot;margin-top: 100px;&quot;&gt;
        &lt;p&gt;
            My name is &lt;textarea name=&quot;name&quot; cols=&quot;10&quot; rows=&quot;1&quot; placeholder=&quot;enter name&quot;&gt;&lt;/textarea&gt; and I come from a village called &lt;textarea name=&quot;village&quot; cols=&quot;10&quot; rows=&quot;1&quot; placeholder=&quot;enter village&quot;&gt;&lt;/textarea&gt; 
            . Everybody from the village of &lt;textarea cols=&quot;10&quot; rows=&quot;1&quot; placeholder=&quot;enter village&quot;&gt;&lt;/textarea&gt; knows that my name is &lt;textarea cols=&quot;10&quot; rows=&quot;1&quot; placeholder=&quot;enter name&quot;&gt;&lt;/textarea&gt; 
        &lt;/p&gt;
        &lt;p&gt;
        &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  </code></pre>
  <p><a href="https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize">I found a very similar question for the height of a textarea</a> 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?</p>
  <p><a href="https://i.stack.imgur.com/HGRzU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HGRzU.png" alt="enter image description here" /></a></p>
  <pre><code>&lt;script&gt;
  const tx = document.getElementsByTagName(&quot;textarea&quot;);
  for (let i = 0; i &lt; tx.length; i++) {
    tx[i].setAttribute(&quot;style&quot;, &quot;width:&quot; + (tx[i].scrollWidth) + &quot;px;overflow-x:hidden;&quot;);
    tx[i].addEventListener(&quot;input&quot;, OnInput, false);
  }
  
  function OnInput() {
    this.style.width = &quot;auto&quot;;
    this.style.width = (this.scrollWidth) + &quot;px&quot;;
  }
  &lt;/script&gt;
  </code></pre>