JavaScript Tech

プレースホルダーの改行処理 [jQuery]

プレースホルダーの改行をカジュアルに頼まれてしまい止む無く実施した時のまとめです。

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

  1. JavaScript(jQuery)を利用して改行コードを記述した文章を挿入する
  2. プレースホルダー属性内に改行の実体参照文字を入れて置く
  3. htmlファイル内で改行する

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

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

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

 

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

<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行目の入力');
});

以前のW3Cの仕様だと、「改行文字を含まない任意の文字列が入力されるもの」と言う認識が記載されていたのですが、現在はWHATWGが仕様策定しているため明記されていません。

HTML5が廃止になったタイミングで、ページのドメイン含めて丸ごとなくなっています。

HTML5はW3Cが策定したもので、現行仕様のHTML Living StandardはWHATWGが策定するもので、2021年1月にW3CがHTML標準として推奨しました。

プレースホルダーはあくまで入力例を表記する場所なのと、過去にtextareaの改行は地雷が多かったので、あまり触らないほうがいいかも知れません。

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

参考:

新 https://html.spec.whatwg.org/multipage/form-elements.html#attr-textarea-placeholder

すでに削除されているけど昔のURL https://www.w3.org/TR/html5/sec-forms.html#the-placeholder-attribute

 

jQuery最高の教科書

  • この記事を書いた人

九十九千兵衛

常に必要最小限のことで働きかけることを学ぶ。

-JavaScript, Tech

© 2021 Tech Economy