2019年10月31日

placeholder(プレースホルダ)で改行をする方法(全ブラウザ対応版)

placeholder(プレースホルダ)で改行をする方法(全ブラウザ対応版)

お世話になっております。佐藤です。

今回はplaceholderに関して書いていこうと思います。

以前案件で以下のような要望がありました。

placeholderをデザイン上+説明が見やすいように改行して実装してくれませんか?

確かに改行など簡単に出来そうに見えますが結構手間がかかります。

もちろん、クライアント様には「placeholderというのは簡易的な補足説明なのでそもそも改行するという仕様ではありません。」「説明は上部に文章で記述してはいかがですか?」と伝えはしましたが、どうしてもデザイン的にお願いできませんかとのことでしたので、実装方法を考えました。

placeholder(プレースホルダ)で改行をする方法

placeholderの改行対策

placeholderの改行対策 | 方法1

<textarea name="msg" id="msg" cols="30" rows="10" placeholder="テスト1&#13;テスト2&#13;テスト3"></textarea>
chrom,firefoxでの画像
safariでの画像
ChromeFirefoxSafari IE 
Mac◯(最新)×
Windows

placeholderの改行対策 | 方法2

次に見つかった方法はhtmlのタグの中身を改行するという方法です。以下のような感じです。

<textarea name="msg" id="msg" cols="30" rows="10" placeholder="テスト1
テスト2
テスト3"></textarea>
実際のコードの画像

この方法では、コーディングの際にインデントをつけると、その分画面上にもインデント分隙間ができてしまうので、上記の画像のように記述しないといけません。ブラウザの対応も方法1と同じ+コードも見にくいという理由でこの方法もしっくりきませんでした。

placeholderの改行対策 | 方法3 (最終実装)

結局、色々とHTMLやCSSの仕様で悩むよりJavaScriptを用いて強引にplaceholderっぽく実装することが一番応用も効き、ブラウザの差異もなく、楽だという結論に至りました。

HTML

<textarea name="msg" id="msg" cols="30" rows="10" placeholder="">
<div id="placeholderDiv">
  これは例です。<br>
  これはテストです!
</div>

CSS

.textareaDiv {
  position: relative;
}
textarea {
  opacity: .7;
}
.textareaDiv #placeholderDiv {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 14px;
}
.textareaDiv #placeholderDiv.none {
  display: none;
}

JavaScript

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');
    }
});

いかがでしょうか?この方法ならブラウザの差異などで悩むことはありませんし、HTMLとJavaScriptで実装しているのでCSSで装飾することも画像や動画を入れることも可能です。

placeholderの改行についての注意点

ただ1つ頭に入れておいて頂きたいことは、今回のplaceholderの改行に関しては想定されている仕様と異なる実装を行っているということです。

ディレクションを行う人が制作に長けている方なら問題ありませんが、そうでない場面も少なくないと思います。そのような時に「今やろうとしていることは非推奨なことなんですよ」と注意を促したり、代替案を提案してあげることがエンジニアには求められていると思います。
もちろん、どうしてもお願いしますということはあります。その際の手助けになれば幸いです。SeekNextではこういった細かな部分にも力を入れて制作を行っております。

是非参考にしてくださると幸いです。