こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

お問い合わせフォームのタグのひとつ<textarea>。
詳細な内容を入力する際に使うことが多いタグです。
ふと、このタグのplaceholder属性を改行したいと思った時、<br>や\nで改行するか試してみましたが上手くいきませんでした。
<textarea>のplaceholder属性は改行出来ない仕様なんだと諦めましたが、もう少し調べてみると出来る方法があることが分かりました。

この記事では<textarea>のplaceholder属性を改行する方法をご紹介したいと思います。

placeholderのテキストを改行する方法

<textarea>のplaceholder属性のテキストを改行させる方法はこちら。

<textarea name="" placeholder="お問い合わせ内容をご入力ください。&#10;例）パスワードを忘れた"></textarea>

特殊文字の
を指定することでその部分で改行されます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

もしくはこちら。

<textarea name="" placeholder="お問い合わせ内容をご入力ください。
例）パスワードを忘れた">

ソース内で直接改行することでもplaceholder属性のテキストを改行させることが出来ます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ちなみに、placeholder属性は\nや<br>では改行出来ません。そのまま出力されてしまいます。

注意点

上でご紹介した方法はMacのSafariでは改行されません。

そのため、MacのSafariでも対応する場合は他の方法でplaceholder属性のテキストを改行する必要があります。

【全ブラウザ対応】placeholderのテキストを改行する方法

js（jQuery）を使うことでMacのSafari含め全てのブラウザでplaceholder属性のテキストを改行することが出来ます。

MacのSafari含め全てのブラウザでplaceholder属性のテキストを改行する方法はこちら。

HTMLはこちら。

<div class="box">
    <textarea name=""></textarea>
    <span class="placeholder">お問い合わせ内容をご入力ください。<br>例）パスワードを忘れた"</span>
</div>

CSSはこちら。

.box{
    position: relative;
    z-index: 1;
}
textarea{
    width: 100%;
    height: 100px;
    padding: 10px;
    line-height: 1.5;
    box-sizing: border-box;
    background: transparent;
}
.placeholder{
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    color: #bbb;
    font-size: 80%;
    padding: 10px;
}
.placeholder.hidden{
    display: none;
}

jsはこちら。

$('textarea').on('input', function(){
    if( $(this).val().length > 0 ){
        $('.placeholder').addClass('hidden');
    }else{
        $('.placeholder').removeClass('hidden');
    }
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

placeholder属性を使わず、<span>を使って擬似的にplaceholder属性に似せたテキストを<textarea>上に配置します。
そして、<textarea>にカーソルを合わせた時、改行含め入力文字数が0で無ければ<span>を非表示にします。

これでMac含め全てのブラウザに対応したplaceholder属性の改行を実現することが出来ます。

まとめ

いかがでしたか？
全ブラウザに対応したplaceholder属性を改行する方法はjs（jQuery）を使う必要があります。
placeholder属性は入力するユーザーをサポートする重要な要素です。
是非、この方法を使いplaceholder属性を改行してみて下さい。