入力内容に応じて高さを自動調整するtextareaの作り方（Javascript、CSS<field-sizing>、jQuery、ライブラリを使った各方法）

<h1>高さが自動調整されるtextarea</h1>
<textarea id="sample" name="sample" class="adjusted-textarea"></textarea>

/* ブラウザデフォルトCSSを解除  */
textarea {
  appearance: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;  
}
/* 自動調整対象 */
.adjusted-textarea {
  overflow: hidden;
  resize: none;
}

// 処理対象のオブジェクトを取得します   
const ta = document.getElementById('sample');

// inputイベントを登録します 
ta.addEventListener('input', async function() {
  // style.heightの値を一旦autoにします  
    const rh = await resetHeight();
    if (rh === 'auto') {
      // style.heightがautoになった後にscrollHeightを設定します
      ta.style.height = `${ta.scrollHeight}px`;
    }
});
// 処理対象のstyle.heightをautoにする処理です。
// 確実にautoに設定されてから次の処置に進みたいのでPromiseを設定します   
function resetHeight() {
    return new Prmise(resolve => {
        resolve((ta.style.height = 'auto'));
    });
}

/* ブラウザデフォルトCSSを解除  */
textarea {
  appearance: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;  
}
/* 自動調整対象 */
.adjusted-textarea {
  overflow: hidden;
  resize: none;
  field-sizing: content;   /* 追加 */
  min-height: min-content; /* 追加 */
}

// 処理対象のオブジェクトを取得し、inputイベントを登録します
const $ta = $('#sample');

$ta.on('input', async function() {
  // style.heightの値を一旦autoにします  
  const rh = await resetHeight();
  if (rh) {
    // style.heightがautoになった後にscrollHeightを設定します
    $ta.css('height', $ta[0].scrollHeight);
  }
});

// 処理対象のstyle.heightをautoにする処理です。
// 確実にautoに設定されてから次の処置に進みたいのでPromiseを設定します   
function resetHeight() {
  return new Promise(resolve => {
    $ta.css('height', 'auto');
    resolve(true);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.20/autosize.min.js"></script>

<script>
autosize(document.querySelectorAll('.adjusted-textarea'));
</script>