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

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