CSSとjqueryを使用してテキスト領域のオプションをスクロールするために与えられた以上の高さを与える方法

Question

私たちはチャットアプリケーションを開発しました。このアプリケーションではテキスト領域があります。テキストエリアにテキストを入力するユーザは、以下の要件を示す必要があります。

まず、テキスト領域の高さを指定する必要がありますか、それとも既定値で十分であるのですか。テキスト領域に入力した後、自動的にいくつかの一定の高さの上限を増加させます。

指定された高さのテキスト以上のユーザー。 overflow-y：scroll.onlyを与える必要があります。

テキストの送信とテキスト領域が元の位置に来るはずです。

<div style="background: #a61735;display: inline-flex; width: 100%;padding-left: 10px;padding-bottom: 2px;margin-bottom: 51px;"> 
 
\t \t <div class="right" style="padding: 0px; margin-top: 0px; width: 100%;"> 
 
\t \t \t <textarea autofocus="autofocus" id="txtarqlmchat" style="min-height: 50px;overflow-y: scroll;"></textarea> 
 
\t \t </div> 
 

 
\t \t <div style="padding-top: 0px;padding-left: 8px;margin-right: 17px;margin-top: 6px"> 
 
\t \t \t <img src="img/send.png" width="40px"> 
 
\t \t </div> 
 
\t 
 
\t </div>

Answer 1

私はtextboxためのコードを書かれています。それがあなたを助けることを願っています。

HTML-

<div> 
    <textarea autofocus="autofocus" id="txtarqlmchat" style="min-height: 50px;overflow-y: scroll;" data-limit='150'></textarea> 
    <button class="resetHight">reset</button> 
</div> 

jQueryの - このdata-limit='150'で

$('#txtarqlmchat').on('keydown',function(){ 
    var limitH = $(this).attr('data-limit'); 
    var innerH = $('#txtarqlmchat')[0].scrollHeight; 
    if(innerH <= limitH){ 
     $('#txtarqlmchat').height(innerH); 
    } 
    else{ 
     $('#txtarqlmchat').height(limitH); 
    } 
}) 
$('.resetHight').on('click',function(){ 
    $('#txtarqlmchat').height(50); 
}) 

は、与えられた一定の高さです。 resetHightは、テキストボックスの高さをリセットするボタンです。 デモ - jsFiddle