扩展文本区域 - 在发生模糊事件时，文本区域最小化为其原始大小

Question

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

这是扩展代码：（取自一个previous question）

$('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