textarea を可変サイズで実装する

 問い合わせフォームで使っている textarea を入力した内容に合わせてサイズを可変にしてみました。

 内容に応じてサイズが可変する <textarea> を素敵に実装するを参考にしました。html と css、javascript の合わせ技です。

 それぞれの内容は、参考サイトにあるのですが、それぞれを記述する場所が問題です。はじめ、css と javascript を html の head 部に書いていましたが、それだとうまく行きませんでした。問題は、javascript の実行位置です。

 javascript を実行する位置が textarea を作成した後でなければならないようです。できれば、body を閉じる直前に実行するのがいいでしょう。javascript で操作する要素が作成された後で実行するということです。記述する順番としては、次のようになります。

  1. head 部に css を書く
  2. body 部に textarea を書く
  3. body 部の最後に javascript を書く

 これで期待通りに、 textarea の内容に従って高さが変わってくれました。

 ほぼ、参考サイトのままですが、念の為、確認で作った html を提示しておきます。

<!DOCTYPE html> <html lang="ja"> <head> <title>可変 textarea</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <style> .ft { position: relative; font-size: 1rem; line-height: 1.8; } .ft_dummy { overflow: hidden; visibility: hidden; box-sizing: border-box; padding: 5px 15px; min-height: 120px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; border: 1px solid; } .ft_textarea { position: absolute; top: 0; left: 0; box-sizing: border-box; padding: 5px 15px; width: 100%; height: 100%; background-color: transparent; border: 1px solid #b6c3c6; border-radius: 4px; color: inherit; font: inherit; letter-spacing: inherit; resize: none; background-color: #ffffff; } </style> </head> <body> <p>コメント: <div class="ft"> <div class="ft_dummy" aria-hidden="true"></div> <textarea id="ft" class="ft_textarea" placeholder="コメントをどうぞ"></textarea> </div> </p> <script> function flexTextarea(el) { const dummy = el.querySelector('.ft_dummy'); el.querySelector('.ft_textarea').addEventListener('input', e => { dummy.textContent = e.target.value + '\u200b'; }); } document.querySelectorAll('.ft').forEach(flexTextarea); </script> </body> </html>

web サイト

Posted by sirius