全ブラウザ対応的なやつ。
やること
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つ限りなので、複数設置もいけるようにもうちょっと実用性を上げた感じ。
コメント