jQueryでHTMLのtextarea要素のrows属性の値を、動的に書き換える方法

タイトル通りです。
jQueryでHTMLのtextarea要素のrows属性の値を、動的に書き換える方法を教えてください。

実装したいのは、LINEのようなイメージです。
rowsは1から始まり、改行は３行まで(つまりrows=3まで)で、４行以降の行からスクロールバーが表示されるような仕組みです。
行を増やす処理は上手く行ったのですが、行の1文字目まで消すと行が減るようにしたいです。
やり方をご教授願いたいです。

以下、コードを記載いたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<link rel="stylesheet" href="styles.css">
6<title></title>
7</head>
8<body>
9<form method="post">
10  <textarea class="input_comment" rows="1"></textarea>
11  <input type="submit" value="&#xf044; 書き込む" class="fas">
12</form>
13</body>
14</html>

CSS
1body {
2  background-color: #ccc;
3}
4
5form {
6  display: flex;
7}
8
9textarea.input_comment {
10  font-size: 18px;
11  padding: 10px;
12  border-radius: 3px;
13  border-right:none;
14  border-left:none;
15  border-top:none;
16  outline: none;
17  resize: none;
18}
19
20input[type="submit"].fas {
21  background: #CC3366;
22  color: #FFDDFF;
23  padding: 10px 5px;
24  align-items: center;
25}

jQuery
1
2$(function() {
3  let default_row = $('textarea.input_comment').attr("rows")
4  $('textarea.input_comment')
5  .on('change keyup keydown paste cut', function(){
6  while ($(this).outerHeight() < this.scrollHeight) {
7　　　if ($(this).attr("rows") == 3) {
8　　　　break;
9　　　}
10      $(this).attr("rows", default_row++)
11   }
12 });
13});

これで行を増やす処理は上手く行ったのですが、行を減らす処理をどう書けばよいのかわかりません。

ご教授いただけますと助かります。
どうかよろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

こちらはいかがでしょうか？
解説はソースコード中のコメントにて失礼します。

jQuery
1$(function() {
2  let default_row = $('textarea.input_comment').attr("rows")
3  $('textarea.input_comment')
4  .on('change keyup keydown paste cut', function(){
5  
6  // テキストエリア内部の文字列の行数を取得して、
7  const lineLength = this.value.split('\n').length;
8  // 最大3行の範囲内で lineLength の値を rows 属性に反映させる。
9  $(this).attr("rows", Math.min(3, lineLength || 1));
10
11 });
12});