javascript - 动态调整文本区域的宽度和高度以包含文本

Question

我有一个包含文本区域元素的 div。 div 的大小是固定的，但如果输入的文本足够多，滚动条将显示。目前，文本区域的高度可以正确地动态增长和收缩，但宽度不会。

我一直在修改这里给出的代码:http://alistapart.com/article/expanding-text-areas-made-elegant并已达到这一点(在 jsfiddle 中显示):http://jsfiddle.net/fayu5sh2/2/

它目前的工作方式是将 textarea 设置为 div 的 100% 宽度和高度，并将其内容馈送到隐藏的 span 中，这会改变包含 div 的高度(当按下 enter 时)和宽度.虽然 span 运行正常，但文本区域不会保持宽度:100%。可以这样做吗？

隐藏的 span 当前可见以显示其内容在做什么，textarea 中的文本应直接位于 span 中文本的顶部。

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

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

此代码调整所有 textarea 的大小，同时保持最小宽度和高度为 50 像素:

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

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

将 textarea 的 wrap 属性设置为“off”:

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