展开文本区域 - 模糊事件文本区域最小化到其原始大小

Question

我必须创建一个文本区域，根据文本扩展。 文本区域最小化为原始大小的问题（我不希望发生这种情况）。

这是扩大代码：（它是从一个precvious问题采取）

$('texterea').keyup(function(e){ 
    if($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) { while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) { $(this).height($(this).height()+1); }; } else { while(!($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth")))) { $(this).height($(this).height()-1); }; 

的HTML：

<g:form action="reply" id="${conversationInstance.id}"> 
    <div class="convo-body"> 
     <textarea class="reply input-text-big" rows="1" name="message" placeholder="Send a reply"></textarea> 
    </div> 
    <div class="mt-16"> 
     <button type="submit" class="pull-right button-blue" disabled>Send</button> 
    </div> 
</g:form> 

Answer 1

好了，该代码伤了我的大脑，所以这里是它的一个编辑：

$('textarea').keydown(function(e){ 
    var $this = $(this), 
     bw = parseFloat($this.css('border-top-width')) + 
      parseFloat($this.css('border-bottom-width')), 
     thisTargetH = this.scrollHeight, 
     thisOrigH = $this.outerHeight() - bw, 
     diff = thisTargetH-thisOrigH; 
    if(diff > 0){ 
     $this.height('+='+diff); 
    } 
}); 

的工作示例见this demo fiddle