【全ブラウザ対応】placeholderのテキストを改行する方法
お問い合わせフォームのタグのひとつ<textarea>。
詳細な内容を入力する際に使うことが多いタグです。
ふと、このタグのplaceholder属性を改行したいと思った時、<br>や\nで改行するか試してみましたが上手くいきませんでした。<textarea>のplaceholder属性は改行出来ない仕様なんだと諦めましたが、もう少し調べてみると出来る方法があることが分かりました。
この記事では<textarea>のplaceholder属性を改行する方法をご紹介したいと思います。
placeholderのテキストを改行する方法
<textarea>のplaceholder属性のテキストを改行させる方法はこちら。
<textarea name="" placeholder="お問い合わせ内容をご入力ください。 例）パスワードを忘れた"></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属性を改行してみて下さい。
