Dynamically resize textarea width and height to contain text

Question

I have a div that contains a textarea element. The div is fixed in size, but scroll bars will show if enough text is entered. Currently, the textarea height dynamically grows and shrinks correctly, but not the width.

I have been modifying the code given here: http://alistapart.com/article/expanding-text-areas-made-elegant and have gotten to this point (shown in jsfiddle): http://jsfiddle.net/fayu5sh2/2/

The way it currently works is that the textarea is set to 100% width and height of the div, and its content is feed into a hidden span, which changes the height (when enter is pressed) and width of the containing div. While the span operates correctly, the textarea doesn't maintain width: 100%. Is it possible to do this?

The hidden span is currently visible to show what its content is doing, the text in the textarea should lie directly on top of the text in the span.

Here is the html:

<div id="containing_box">
    <div class="expandingArea">
        <pre><span></span><br></pre>
        <textarea></textarea>
    </div>
</div>

Here is the javascript:

$(document).ready(

    function() {

        $('div.expandingArea').each(function() {
            var area = $('textarea', $(this));
            var span = $('span', $(this));

            area.bind('input', function() {
                span.text(area.val());
            });

            span.text(area.val());

            $(this).addClass('active');
        });    
    }
);

and the CSS:

#containing_box {
    width: 300px;
    height: 200px;
    overflow: auto;
    border: 1px solid;
}

textarea, 
pre, p {
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
}

.expandingArea {
  position: relative;
  border: 1px solid #888;
  background: #fff;
}

.expandingArea > textarea,
.expandingArea > pre {
    padding: 5px;
    background: transparent;
    white-space: pre;
}

.expandingArea > textarea {
  /* The border-box box model is used to allow
   * padding whilst still keeping the overall width
   * at exactly that of the containing element. */

  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;


  /* This height is used when JS is disabled  */
  height: 100px;
  width: 100px;
}

.expandingArea.active > textarea {
  /* Hide any scrollbars */
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /* Remove WebKit user-resize widget */
  resize: none;
}

.expandingArea > pre {
  /* display: none;*/
  color: blue;
}
.expandingArea.active > pre {
  display: block;
  /* Hide the text; just using it for sizing */
  /* visibility: hidden; */
}

Answer 1

You can make a textarea dynamically resize by monitoring its scrollWidth and scrollHeight within an input event.

This code resizes all textareas while maintaining a minimum width and height of 50px:

$('textarea').on('input', function() {
  $(this)
    .width (50)
    .height(50)
    .width (this.scrollWidth)
    .height(this.scrollHeight);
});

Note that width and height are first set to their initial values to force a scroll.

Set the textarea's wrap attribute to "off":

<textarea wrap="off"></textarea>

And set its style to overflow: hidden:

textarea {
  overflow: hidden;
}

Snippet:

$('textarea').on('input', function() {
  $(this)
    .width (50)
    .height(50)
    .width (this.scrollWidth)
    .height(this.scrollHeight);
});

textarea {
  overflow: hidden;
  width: 50px;
  height: 50px;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea wrap="off" autofocus></textarea>