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

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

我一直在修改这里给出的代码：并且已经达到了这一点（如JSFIDLE所示）：

它目前的工作方式是将textarea设置为div的100%宽度和高度，并将其内容输入到隐藏跨距中，从而更改包含div的高度（按下enter键时）和宽度。虽然跨距操作正确，但textarea不保持宽度：100%。有可能这样做吗

隐藏跨距当前可见，以显示其内容正在执行的操作，textarea中的文本应直接位于跨距中文本的顶部

以下是html：

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

和CSS：

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

---

将此添加到javascript中

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

小提琴在这儿

---

如果页面上有多个此类，则需要使用ID或类，而不是常规的“span”和“textarea”

您可以通过在

输入
事件中监视
textarea
的
滚动宽度和
滚动高度来动态调整其大小

此代码调整所有
textarea
s的大小，同时保持最小宽度和高度为50px：

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

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

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

片段：


$（'textarea'）。在（'input'，function（）上{
$（本）
.宽度（50）
.身高（50）
.width（此.scrollWidth）
.高度（此高度）；
});
textarea{
溢出：隐藏；
宽度：50px；
高度：50px；
填充：0；
}

检查此线程@sbjumani我发现的所有线程似乎只处理调整textarea高度的大小，不幸的是没有处理宽度…你想避免包装，还是希望宽度和高度始终相等，因此textarea是正方形？将文本放在容器中，并将最大宽度设置为100%。允许由父级控制宽度，并管理高度。听起来有点奇怪，你们两个都需要计算。@RickHitchcock不，它不需要保持正方形，是的，我想避免包装。我想要的是，如果添加了换行符，文本区域的高度将增加，否则，如果您继续在同一行上键入，则仅宽度将增加。这使我更接近我所追求的内容。我采用了这种方法并简化了代码（）。但是为什么textarea边框会在溢出中消失？不确定你是指我的代码还是你的代码？你的小提琴显式隐藏了textarea边框，但它应该在我的中可见。我明白你的意思，我看到的边框是expandingArea div边框，而不是textarea边框。@Rick Hitchcock这太神奇了……顺便说一句，如何在更改内容字体大小时调整此textarea的大小？@RyanTran，应该仍然有效，但是您可能需要触发事件，比如
$（'textarea'）。trigger（'input'）
我最初试过小提琴，发现它没有按预期工作。问题是这个函数的内容应该在我已经拥有的每个函数中。仍在处理其他几个问题，主要与边界不正常有关。
$('textarea').on('input', function() {
  $(this)
    .width (50)
    .height(50)
    .width (this.scrollWidth)
    .height(this.scrollHeight);
});

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

textarea {
  overflow: hidden;
}