随文本增长的文本区域

Question

我正在为一个商业应用程序做一点评论功能。每个注释都是一个跨度，如果您单击它，它将更改为一个文本区域。

问题是，我希望文本区域与文本中的文本占用相同的空间(比如不编辑时的跨度)。

我已经找到了让行随文本增长的解决方案(jQuery、自动大小等)，但是是否有任何解决方案使文本的宽度和高度同时增长？

编辑：在其编辑模式中标记看起来像这样(使用Knockout，这就是动态呈现的的样子，实际的KO是不同的)

<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中最长的行，并将文本区域的最大宽度设置为父级宽度减去总的筛选宽度？用CSS或jQuery解决这个问题没有更干净的解决方案吗？

Answer 1

您必须动态地调整文本区域的高度，在键控和按键上。将高度分配给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();
          });
        });

Answer 2

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


<div contenteditable>Type me</div>