动态调整textarea宽度和高度的大小以包含文本

Question

我有一个包含textarea元素的div。div的大小是固定的，但是如果输入了足够的文本，则会显示滚动条。当前，textarea高度会动态正确地增长和缩小，但宽度不会正确增长。

我一直在修改此处给出的代码：http ://alistapart.com/article/expanding-text-areas-made-elegant，并且到此为止（显示在jsfiddle中）：http : //jsfiddle.net/fayu5sh2/ 2 /

当前的工作方式是将textarea设置为div的宽度和高度的100％，并将其内容输入到一个隐藏的跨度中，该跨度会更改包含div的高度（按Enter时）和宽度。尽管跨度正常运行，但文本区域无法保持宽度：100％。是否有可能做到这一点？

当前可以看到隐藏的跨度以显示其内容在做什么，textarea中的文本应直接位于跨度中的文本上方。

这是html：

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

这是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');
        });    
    }
);

和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

您可以textarea通过监视事件scrollWidth和scrollHeight在input事件中进行动态调整大小。

这段代码调整了所有textareas的大小，同时保持最小宽度和高度为50px：

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

请注意，首先将width和height设置为其初始值以强制滚动。

将textarea的wrap属性设置为“关闭”：

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

并将其样式设置为overflow: hidden：

textarea {
  overflow: hidden;
}

片段：

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

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

textarea {
  overflow: hidden;
}