テキストを収めるようにテキストエリアの幅と高さを動的に調整する

JavaScriptを使用すると、テキストに合わせてテキストエリアの幅と高さを動的に調整できます。例：

<textarea id="myTextarea" oninput="adjustTextareaHeight(this)"></textarea>

<script>

function adjustTextareaHeight(textarea) {

// 重置textarea的高度

textarea.style.height = ‘auto’;

// 调整到适合文本内容的高度

textarea.style.height = textarea.scrollHeight + ‘px’;

}

// 在页面加载完成后调用一次，以确保初始文本也能正确显示

window.onload = function() {

var textarea = document.getElementById(‘myTextarea’);

adjustTextareaHeight(textarea);

};

</script>

上記のコードでは、textareaのoninputイベントをバインドしており、ユーザーがテキストを入力するとadjustTextareaHeight関数がトリガーされます。この関数はtextareaの高さをデフォルト値にリセットし、テキストの内容の高に合わせて高さを調整します。

さらに、ページロード完了時にadjustTextareaHeight関数を呼び出すことで、初期テキストも正しく表示されるようにしています。myTextareaはご自身のtextareaのidに置き換えてください。

これにより、テキスト量に合わせたtextareaの高さの自動調整が可能となり、全てのテキストが完全に表示されるようになります。