テキストを削除した後のテキストエリアのサイズ変更

Question

テキストを書き込むと、textareaのサイズが大きくなりますが、このテキストを削除すると何も起こりません。テキストを削除する場合、textareaの高さを動的に減らすことは可能ですか？設定し

.OuterDiv 
 
{ 
 
    width:200px; 
 
    height:300px; 
 
    border:1px solid #000; 
 
    position:relative; 
 
    bottom:0; 
 
} 
 
.text 
 
{ 
 
    resize:none; 
 
    width:198px; 
 
    min-height:45px; 
 
    height:auto; 
 
    max-height:145px; 
 
    background-color:rgba(90,90,180,1); 
 
    font-size:16px; 
 
    font-family:Arial; 
 
    overflow-y:auto; 
 
    padding:0; 
 
} 
 

 
[contenteditable=true]:empty:before{ 
 
    content: attr(placeholder); 
 
    display: block; /* For Firefox */ 
 
    color: grey; 
 
}

<div class="OuterDiv"> 
 
    <div class="text" contentEditable="true" placeholder="Write some text..."></div> 
 
</div>

Answer 1

：あなたが代わりにそれが自動サイズ変更任意のスクリプトのcontentno必要性に応じますcontentEditableでのdivを使用することができ

$('textarea').on('input', function() { 
 
    var scrollHeight = parseInt($(this).prop('scrollHeight')); 
 
    $(this).height(scrollHeight); 
 
});

.OuterDiv 
 
{ 
 
    width:200px; 
 
    height:300px; 
 
    border:1px solid #000; 
 
    position:relative; 
 
    bottom:0; 
 
} 
 
.text 
 
{ 
 
    resize:none; 
 
    width:198px; 
 
    height:45px; 
 
    max-height:145px; 
 
    background-color:rgba(90,90,180,1); 
 
    font-size:16px; 
 
    font-family:Arial; 
 
    overflow-y:auto; 
 
    padding:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="OuterDiv"> 
 
    <textarea class="text" placeholder="Write some text..."></textarea> 
 
</div>

Answer 2

適切ではなくheightスタイル最初の高さを使用して、常に45pxで始まるようにします。

$('textarea').on('input', function() { 
 
    $(this).css('height', "45px"); 
 
    $(this).css('height', this.scrollHeight+"px"); 
 
});

.OuterDiv 
 
{ 
 
    width:200px; 
 
    height:300px; 
 
    border:1px solid #000; 
 
    position:relative; 
 
    bottom:0; 
 
    } 
 
.text 
 
{ 
 
    resize:none; 
 
    width:198px; 
 
    height:45px; 
 
    max-height:145px; 
 
    background-color:rgba(90,90,180,1); 
 
    font-size:16px; 
 
    font-family:Arial; 
 
    overflow-y:auto; 
 
    padding:0; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="OuterDiv"> 
 
    <textarea class="text" placeholder="Write some text..."></textarea> 
 
</div>