[js+css]placeholderを改行する方法

全ブラウザ対応的なやつ。

やること
やっていく
パクリです

やること

textarea内の入力は改行できる（当然）。

textareaのplaceholderは改行できない（仕様）。
※ブラウザによりできたりできなかったりで不安定。

textareaに別途文字入りのブロックを重ねてplaceholderっぽく見せる。

textareaに入力があったら文字入りのブロックを非表示にするようにjsを仕込む。

擬似placeholderをやっていくという話になる。

やっていく

<dl>
    <dt><label>***</label></dt>
    <dd><textarea name="***"></textarea><span class="placeholder">あああああ<br>ああああああああ</span></dd>
    <dt><label>***</label></dt>
    <dd><textarea name="***"></textarea><span class="placeholder">あああああ<br>ああああああああ</span></dd>
    <dt><label>***</label></dt>
    <dd><textarea name="***"></textarea><span class="placeholder">あああああ<br>ああああああああ</span></dd>
    <dt><label>***</label></dt>
    <dd><textarea name="***"></textarea><span class="placeholder">あああああ<br>ああああああああ</span></dd>
</dl>

dd{
	position: relative;
}
dd textarea{
	padding: .25em 5em;
	font-size: 1rem;
	border: 1px solid #ddd;
}
dd .placeholder{
	position: absolute;
	top: 1px;
	left: 1px;
	padding: .25em 5em;
	font-size: 1rem;
}
dd .placeholder.hide{
	display: none;
}

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

パクリです

元ネタはこれ。

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

textareaタグのplaceholder属性のテキストを改行する方法を解説。jQueryを使った全ブラウザ対応の方法もご紹介。このブログはWEBに関するデザイン・コーディング・システムの知識を発信しています。

こちらのサンプルだと1つ限りなので、複数設置もいけるようにもうちょっと実用性を上げた感じ。