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

JavaScript

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

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

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

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

htmlファイル内で改行する

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

インデントを無視する形になるのでダサいですが、何の工夫も必要ありません。

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

プレースホルダー属性内に改行の文字参照を入れる

「プレースホルダー 改行」という検索ワードで出てくる内容の多くが実体参照か文字参照「&#13;&#10;」で記述する方法が上位を締めています。正直こだわるほどマストな仕様ではないはずなので、文字参照でやるくらいならhtmlコード内で改行してしまう方がましだと思います。

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

JavaScript(jQuery)を利用して改行コードを記述した文章を挿入する

いずれにせよ見た目に難色があるため、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

  • この記事を書いた人

九十九史恩

キーを叩いていないときは、都会や田舎の風景を探検しています。

よく読まれている記事

条件の0=0は全てが正であるを意味するSQL 1

SQLの条件に0=0のような記述を見かけます。 変わった書き方の条件ですが、これは「全てが正である」事を意味しており、結合条件の場合はCROSS JOINと同じです。 下記の例で言えば、結合するsub ...

DISTINCTを使わないで重複排除を考えるSQL 2

SQLのDISTINCTはEXISTSとかGROUP BYでなんとかする事もできます。 DISTINCTは暗黙的なソートがされますが、何のDBを使うにせよ過去のバージョンならともかく、最近のバージョン ...

RFC 5322に準拠させた正規表現言語別 3

RFC5322で定義されている正規表現を、各言語の正規表現に変化させた形になります。 完全な電子メール正規表現は存在しないので、結局のところ何かの公式基準に従っていたとしても、自分が携わるサービスのル ...

-JavaScript