textareaでplaceholderを改行する

textareaのplaceholderで改行できるかを試してみました。

サンプルコード

調べてみると、改行したい部分で「 」と入れることで改行ができるようです。

<div class="form_value">
	<textarea class="textarea" placeholder="placeholder&#13;&#10;改行テスト&#13;&#10;2回改行を入れた場合"></textarea>
</div>

placeholder内で改行するデモページ
chromeとFirefox、IE、edgeでは改行されましたが、Safariのみ改行されていませんでした。

Safariの表示

また、edgeの場合は他のブラウザと比べて行間が広くなっていました。

edgeの表示

CSSのline-heightで行間を調整してみます。

<div class="form_value">
	<textarea class="textarea textarea-edge" placeholder="placeholder&#13;&#10;改行テスト&#13;&#10;2回改行を入れた場合"></textarea>
</div>

.textarea-edge::-ms-input-placeholder {
	line-height: 1.2;
	color: red;
}

適用されているかの確認用に、合わせて文字色を赤にしています。
edge用にCSSを設定するデモページ
これで行間が調整されるかと思ったのですが、line-heightは適用されないようでした。

別の方法として、jsでplaceholderを実装して改行できるようにしてみます。
まずHTMLですが、data-placeholderという属性にplaceholderの内容を設定して、改行したい部分に「¥n」を入れます。

<div class="form_value js-custom-placeholder">
	<textarea class="textarea" data-placeholder="placeholder¥n改行テスト¥n¥n2回改行を入れた場合"></textarea>
</div>

次にCSSですが、.placeholderという要素をtextareaの上にかぶせて、擬似的なplaceholderを表示する想定です。

.form_value {
	position: relative;
	width: 400px;
}
.textarea {
	width: 100%;
	height: 200px;
}
.form_value .placeholder {
	position: absolute;
	top: 10px;
	left: 10px;
	pointer-events: none;
}

最後にJavaScriptです。
.js-custom-placeholderという要素内にplaceholder用の要素を生成して、textareaにフォーカスを当てた時と外した時にplaceholderの表示・非表示を切り替えています。

$(function() {
    $('.js-custom-placeholder').find('[data-placeholder]').each(function() {
        // placeholderの要素作成
        var placeholder = $('<div>').addClass('placeholder').html($(this).attr('data-placeholder').replace(/¥n/g, '<br>'));
        $(this).after(placeholder);
 
        // アクセス時点で値が入力されている場合、placeholderを消しておく
        is_value_empty($(this));
    });
    $('.js-custom-placeholder').find('[data-placeholder]').on('focus', function() {
        $(this).next().hide();
    });
    $('.js-custom-placeholder').find('[data-placeholder]').on('blur', function() {
        is_value_empty($(this));
    });
});

function is_value_empty($element) {
    if($element.val() == '') {
        $element.next().show();
    } else {
        $element.next().hide();
    }
}

placeholder内で改行するデモページ2
これでtextareaのplaceholder内で改行させることができました。