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使ってうまくやってください。
以上。
この記事が気に入ったらサポートをしてみませんか?