jquery - 如何在 div 高度增加时更改边框

Question

我有一个包含文本区域的 div。这个 div 有一个 border:1px 纯黑色。现在，当用户在 textarea 中键入内容时，textarea 会变大。

我有这个代码-

$('#sendtext').on('input', function(){
        $this = $(this);
        var totalHeight = $this.prop('scrollHeight') - parseInt($this.css('padding-top')) - parseInt($this.css('padding-bottom'));
        $this.height(totalHeight);
        $div = $('#sendmsg');
        $div.height($div.prop('scrollHeight') - parseInt($div.css('padding-top')) - parseInt($div.css('padding-bottom')))
    });

现在外层 div(textarea 的外层)也随之增长。但是这种高度的变化并没有反射(reflect)在边框上。边界留在那里。如果可能的话，我该如何实现。

PS - 当我在我的 Chrome 中看到它时(Ctrl+Shift+I)，我的外层俯冲高度增加了，但边框并没有反射(reflect)出这种变化。

HTML -

<div id="sendmsg">
                                    <textarea id="sendtext" value="">
                                    </textarea>
                                    <div class="clearBoth"></div>
                                </div>

CSS -

#sendmsg{width:100%; height:auto;}
#sendtext{width:95%; margin:10px; padding:5px; transition: width 0.25s; resize:none; overflow:hidden;}
.clearBoth{clear:both;}

Answer 1

您好，我为您创建了一个 JSFiddle，这里是一个 link希望这有帮助

HTML

<div>
    <textarea id='grow'></textarea>
</div>

CSS

div{
   width: 400px;
   border:solid 1px #333;
   padding:10px;
}
textarea{
   overflow: hidden;
   min-height: 50px;
   max-height: 100px;
}

Javascript/jquery

$(document).ready(function(){
   $('#grow').keyup(function(e) {
      $(this).css('height','5px');
      var a = document.getElementById('grow').scrollHeight+'px';
      $(this).css('height',a);
   });
});