Alpine.jsを使用したテキストエリアの自動高さ調整方法

1. Alpine.jsとx-dataを使用する方法:

HTML:

<textarea x-data="{ textareaHeight: 'auto' }" x-init="
  textareaHeight = $refs.textarea.scrollHeight + 'px';
  $watch('textareaHeight', value => { $refs.textarea.style.height = value; })
" x-ref="textarea" style="resize: none; overflow-y: hidden;" rows="1"></textarea>

2. Alpine.jsとx-modelを使用する方法:

HTML:

<textarea x-data="{ value: '', textareaHeight: 'auto' }" x-init="
  value = $refs.textarea.value;
  textareaHeight = $refs.textarea.scrollHeight + 'px';
  $watch('value', () => {
    textareaHeight = $refs.textarea.scrollHeight + 'px';
    $refs.textarea.style.height = textareaHeight;
  })
" x-ref="textarea" x-model="value" style="resize: none; overflow-y: hidden;" rows="1"></textarea>

3. JavaScriptとイベントリスナーを使用する方法:

HTML:

<textarea id="textarea" style="resize: none; overflow-y: hidden;" rows="1"></textarea>

JavaScript:

const textarea = document.getElementById('textarea');
textarea.addEventListener('input', () => {
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
});

これらの方法を使用すると、テキストエリアの内容が入力されるたびに自動的に高さが調整されます。必要に応じて、CSSのスタイルを調整して、テキストエリアのリサイズやスクロールバーの表示を制御することもできます。

以上が、Alpine.jsとJavaScriptを使用してテキストエリアの自動高さ調整を実装する方法です。