textarea を可変サイズで実装する
問い合わせフォームで使っている textarea を入力した内容に合わせてサイズを可変にしてみました。
内容に応じてサイズが可変する <textarea> を素敵に実装するを参考にしました。html と css、javascript の合わせ技です。
それぞれの内容は、参考サイトにあるのですが、それぞれを記述する場所が問題です。はじめ、css と javascript を html の head 部に書いていましたが、それだとうまく行きませんでした。問題は、javascript の実行位置です。
javascript を実行する位置が textarea を作成した後でなければならないようです。できれば、body を閉じる直前に実行するのがいいでしょう。javascript で操作する要素が作成された後で実行するということです。記述する順番としては、次のようになります。
- head 部に css を書く
- body 部に textarea を書く
- 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>