1. ホーム
  2. html

[解決済み] Can you have multiline HTML5 placeholder text in a <textarea>?

2022-05-30 16:37:15

Question

I have ghost text in textfields that disappear when you focus on them using HTML5's placeholder attribute:

<input type="text" name="email" placeholder="Enter email"/>

I want to use that same mechanism to have multiline placeholder text in a textarea, maybe something like this:

<textarea name="story" placeholder="Enter story\n next line\n more"></textarea>

But those \n s show up in the text and don't cause newlines... Is there a way to have a multiline placeholder?

UPDATE : The only way I got this to work was utilizing the jQuery Watermark plugin を利用することでした。このプラグインはプレースホルダーテキストにHTMLを使用することができます。

$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});

どのように解決するのですか?

以下のような場合 <textarea> s 仕様 は、プレースホルダー属性のキャリッジリターン+改行が、ブラウザによって改行としてレンダリングされなければならない(MUST)ことを明確に概説しています。

ユーザーエージェントは、要素の値が空文字列で、コントロールがフォーカスされていないとき(例えば、フォーカスされていない空白のコントロールの中に表示することによって)、ユーザーにこのヒントを提示しなければなりません。ヒント内のすべての U+000D CARRIAGE RETURN U+000A LINE FEED 文字ペア (CRLF) やヒント内の他のすべての U+000D CARRIAGE RETURN (CR) と U+000A LINE FEED (LF) 文字は、ヒントを表示する際に改行として扱われなければなりません。

MDN でも反映されています。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

ちなみに、Chrome 63.0.3239.132 で試したところ、確かに書いてあるとおりに動きました。