1

我正在为一个商业应用程序做一个小评论功能。每条评论都是一个跨度，如果你点击它，它会变成一个文本区域

问题是我希望 textarea 占用与其中的文本相同的空间（例如不编辑时的跨度）

我找到了让行随文本增长的解决方案（jQuery Autosize 等），但是是否有任何解决方案可以让宽度和高度随文本增长？

编辑：在其编辑模式下，标记看起来像这样（使用敲除，所以这是动态呈现的 HTML 的样子，实际的 KO html 是不同的）

<li>
    <span style="display: none">This is a comment</span>
    <textarea>This is a comment</textarea>
    <span class="username">UserOne</span>
    <span class="timestamp">Mars 26 '13</span>
</li>

edit2：所以这是唯一的解决方案：将 cols 设置为 textarea 中最长的行，并将 text-area 的最大宽度设置为 parent-width 减去总兄弟宽度？没有使用 CSS 或 jQuery 的开箱即用解决方案吗？

4

2 回答 2

0 
<style>
div[contenteditable]{
    border: 1px solid black;
    overflow: none;
}
</style>


<div contenteditable>Type me</div>
于 2013-07-29T13:58:12.610 回答
0

您必须在 keyup 和 keydown 上动态调整 textarea 的高度。将高度分配给 auto 以便 scrollHeight 反映所需的高度，然后将高度重新分配给它。查看以下代码：

        var computedElement = window.getComputedStyle($(element)[0]),
        paddingTop = parseInt(computedElement.paddingTop),
        paddingBottom = parseInt(computedElement.paddingBottom),
        borderBottom = parseInt(computedElement.borderBottom),
        borderTop = parseInt(computedElement.borderTop),
        lineHeight = parseInt(computedElement.lineHeight),
        outerHeight = paddingBottom + paddingTop + borderTop + borderBottom;

        var resize = function() {
          //height:auto resets the height to row=1 to get the scrollHeight without white space
          $(element).css('height', 'auto');
          $(element).height($(element)[0].scrollHeight - outerHeight);
        }

        //first resize to set the existing text
        $timeout(function(){
          if($(element).val().length) {
            resize();
          }
        });

        //resize on keyup and keydown 
        $(element).on('keydown keyup', function() {
          $timeout(function(){
            resize();
          });
        });
于 2017-02-26T19:44:48.427 回答