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

Question

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

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

它目前的工作方式是将 textarea 设置为 div 的 100% 宽度和高度，并将其内容馈送到隐藏跨度中，这会改变包含 div 的高度（按下回车时）和宽度.虽然跨度正常运行，但 textarea 不保持宽度：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 的大小。

此代码调整所有 textareas 的大小，同时保持 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>

Answer 2

在 javascript 中添加这个

$('textarea').on('keyup',function(){
  var spanwidth = $('span').css('width')
  $('textarea').css('width',spanwidth) 
})

这是小提琴http://jsfiddle.net/fayu5sh2/5/

如果页面上有多个这些，则需要使用 ID 或类，而不是一般的“span”和“textarea”