コンテンツの幅に合わせてテキスト領域のサイズを変更し、最小幅と最大幅を設定するにはどうすればよいですか?

Question

それで、現在テキスト領域で問題が発生しています。コンテンツの幅に合わせてサイズを変更できません... コンテンツの高さに関する長くて詳細な答えを見つけました。それは機能します。しかし、それ以上のコンテンツ幅はありません...

これはその記事です: 自動サイズ変更を使用したテキスト領域の作成

ただし、問題は解決されていないので、幅も調整する必要があります。最大幅と最小幅を考慮してください。

これはサンプルコードです:

$("textarea").each(function () {
  this.setAttribute("スタイル", "高さ:" (this.scrollHeight) "px;");
}).on("入力", function () {
  this.style.height = 0;
  this.style.height = (this.scrollHeight) "px";
});
$("テキストエリア").trigger("入力");

textarea{
  境界線: 1 ピクセルの黒一色。
  最小幅: 50ピクセル;
  最大幅: 300ピクセル;
  幅: 自動;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.3.min.js">< ;/スクリプト>
<textarea>これは私の通常のコンテンツであり、このコンテンツは最大幅</textarea>と同じ長さであると見なす必要があります。
<textarea>これは私の通常のコンテンツです。</textarea> と考えてください。
<textarea>これが私の最小コンテンツです</textarea>

また、これは私が彼らに望んでいることです:

Answer 1

これに似ていますか?

注: コメントで述べたように、この手法では contenteditable 属性を使用します

リーリー リーリー