divをtextareaに変える魔法

嘘です。魔法じゃないです。

こんにちは。最近フロントエンドも頑張ってる細音希です。

textareaタグって若干使いにくいですよね。

divって最高ですよね。

Twitterのツイート入力エリアみたいに、

textareaの大きさを入力内容に応じて大きくしたい

とか思うことありません？

ありますよね？

というわけで、divで作りました。

<div class="textarea" contenteditable></div>

こんな感じで作ります。

divの中身をユーザーが編集出来るように、contenteditable属性をつけておきましょう。

ではcssを書いていきます。

.textarea{
  width: 500px;
  min-height: 200px;
  border: solid 1px black;
}

これで、1pxの枠線がついた500*200の入力エリアが出来ました。

ポイントはmin-heightってやつですね。これで、入力がない状態でも最低200pxの高さを確保します。

そして、入力していくと自動で枠が広がっていきます。

え？textareaタグのようにplaceholderが使いたいって？

じゃあ疑似クラスを使って再現しましょう。

.textarea:empty:before{
  content: 'ここに入力してください';
  color: gray;
}

これでできました。

疑似クラスemptyは、要素の中身が空っぽのときに適用されます。

擬似クラスbeforeは、要素の先頭にcontentを入れるときに使います。

多分afterでも同じようになります。

divにフォーカスをあてて、入力を開始すると、emptyではなくなるのでcontentに設定した文字列は消えます。

これでばっちり、textareaの代用品が出来ましたね！

一応これについて気をつけてほしいのは、このdivにname属性をつけてformタグにブチ込んでもこのdivの内容は送信されませんので、そこはJavaScript使ってうまくやってください。

以上。