【jQuery】プレースホルダーの改行処理

2019年3月13日 2021年11月5日

プレースホルダーはあくまで入力例を表記する場所なので、textarea(テキストエリア)のプレースホルダーで改行なんてしたく無いのですが、カジュアルに頼まれてしまい止む無く実施した時のまとめです。

基本的にプレースホルダーで改行を行う方法は3つあります。一応CSSでも出来るのですが、全ブラウザで正常動作する書き方が思いつかなかったので割愛します。

1番お手軽なのは、3番目のhtmlファイルに直接改行を記載してしまうものです。

ダサいですが何の工夫も必要ありません。

<textarea placeholder="This is a line 
should this be a new line?"></textarea>

1 2	<textarea placeholder="This is a line should this be a new line?"></textarea>

「プレースホルダー改行」とい検索ワードで出てくる内容の多くが実体参照「
」で記述する方法が上位を締めています。

<textarea placeholder="This is a line &#13;&#10; should this be a new line?"></textarea>

1	<textarea placeholder="This is a line should this be a new line?"></textarea>

実体参照でやるくらいならhtmlコード内で改行してしまう方がましだと思います。

いずれにせよ気持ち悪いためjQueryで実装。

$(document).ready(function(){
 $("#target_id").attr('placeholder','1行目の入力だよー\r\n2行目の入力だはー');
});

$(document).ready(function(){

$("#target_id").attr('placeholder','1行目の入力だよー\r\n2行目の入力だはー');

});

以前のW3Cの仕様だと、「改行文字を含まない任意の文字列が入力されるもの」と言う認識が下記の様に記載されていたのですが、現在は明記するのを辞めています(笑)。

というかページのドメイン含めて丸ごとなくなっていますね、だったら色々な個所ちゃんと直せよと思うのですが…。

textareaの改行って地雷が多いので、あまり触らないほうがいいと思っています。

サンプル値または予想されるフォーマットの簡単な説明です。この属性を指定する場合は、U + 000A LINE FEED（LF）またはU + 000D CARRIAGE RETURN（CR）文字を含まない値を指定する必要があります。

参考:

この記事を書いた人

頑張りながら書いています！