placeholder(プレースホルダ)で改行をする方法
今回はplaceholderに関して書いていこうと思います。
以前案件で以下のような要望がありました。
確かに改行など簡単に出来そうに見えますが結構手間がかかります。
もちろん、クライアント様には「placeholderというのは簡易的な補足説明なのでそもそも改行するという仕様ではありません。」「説明は上部に文章で記述してはいかがですか？」と伝えはしましたが、どうしてもデザイン的にお願いできませんかとのことでしたので、実装方法を考えました。
placeholderの改行方法１
<textarea name="msg" id="msg" cols="30" rows="10" placeholder="テスト１
テスト２
テスト３"></textarea>コーディング時にタグの中身を直接改行するという方法です。直接改行または文字参照「 」を使用しても同じ結果が得られます。しかしこの方法ではsafariでは改行できないので、おすすめできません。
| Chrome | Firefox | Safari | IE | |
|---|---|---|---|---|
| Mac | ◯ | ◯（最新） | × | – |
| Windows | ◯ | ◯ | – | ◯ |
placeholderの改行方法2 (最終実装)
結局、色々とHTMLやCSSの仕様で悩むよりJavaScriptを用いて強引にplaceholderっぽく実装することが一番応用も効き、ブラウザの差異もなく、楽だという結論に至りました。
<textarea name="msg" id="msg" cols="30" rows="10" placeholder="">
<div id="placeholderDiv">
これは例です。<br>
これはテストです！
</div>.textareaDiv {
position: relative;
}
textarea {
opacity: .7;
}
.textareaDiv #placeholderDiv {
position: absolute;
top: 15px;
left: 15px;
font-size: 14px;
}
.textareaDiv #placeholderDiv.none {
display: none;
}const textarea = $("#msg");
const placeholderDiv = $("#placeholderDiv");
textarea.on('keyup change', function () {
// textareaの文字を数える
let letterLength = textarea.val().length;
if (letterLength !== 0) {
placeholderDiv.addClass('none');
} else {
placeholderDiv.removeClass('none');
}
});See the Pen placeholder(プレースホルダ)で改行をする方法（全ブラウザ対応版） by seeknext (@seeknext) on CodePen.
いかがでしょうか？この方法ならブラウザの差異などで悩むことはありませんし、HTMLとJavaScriptで実装しているのでCSSで装飾することも画像や動画を入れることも可能です。
placeholderの改行についての注意点
ただ１つ頭に入れておいて頂きたいことは、今回のplaceholderの改行に関しては想定されている仕様と異なる実装を行っているということです。
ディレクションを行う人が制作に長けている方なら問題ありませんが、そうでない場面も少なくないと思います。そのような時に「今やろうとしていることは非推奨なことなんですよ」と注意を促したり、代替案を提案してあげることがエンジニアには求められていると思います。
もちろん、どうしてもお願いしますということはあります。その際の手助けになれば幸いです。SeekNextではこういった細かな部分にも力を入れて制作を行っております。
是非参考にしてくださると幸いです。
色や文字の大きさを変更する方法についても以下の記事で解説していますので、是非ご覧下さい。
