[解決済み] Can you have multiline HTML5 placeholder text in a <textarea>?
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 で試したところ、確かに書いてあるとおりに動きました。
関連
-
[解決済み] AndroidでEditTextにプレースホルダーテキストを追加する
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] HTML5の数値入力のスピンボックスを非表示にすることはできますか?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] 親ディバイスの高さを指定せずに、子ディバイスの高さを100%にする方法は?
-
[解決済み] input type="text "でonchange as-you-typeを追跡する最良の方法?
-
[解決済み】SwiftでUITextView内にプレースホルダーテキストを追加しますか?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
-
[解決済み】HTML5のtextareaのplaceholderが表示されない。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap 3.3.7で改行する方法
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] クリアフィックスとは何ですか?
-
[解決済み] WebSocketとサーバー送信型イベントの比較/EventSource
-
[解決済み] Flexbox:水平方向と垂直方向の中央揃え
-
[解決済み] HTMLアンカーは'name'と'id'のどちらで作成するのが良いですか?
-
[解決済み] テーブル内のテキストアラインクラス
-
[解決済み] Do I use <img>, <object>, or <embed> for SVG files?
-
[解決済み] マークダウンにおける相互参照 (名前付きアンカー)
-
[解決済み】textareaのplaceholder属性の中に改行を挿入する?