テキストエリアに複数行のプレースホルダーを作成する必要がありました。 Firefoxは、他のすべての最新ブラウザーとは異なり、プレースホルダー要素での行の折り返しをサポートしていないことが判明しました。 彼はW3C仕様に従ってそれを行っていますが、これは喜びを加えるものではありません。
すべてのグーグルソリューションは好きではありませんでした。 Firefoxの改行のためだけにjQueryプラグインをインストールしたくありませんでした。 補助ブロックにプレースホルダーを作成することにしました。 その結果、すべてのブラウザーで動作し、プレースホルダーをカスタマイズするための十分な機会を提供する、まさにそのようなシンプルなソリューションになります。
標準の動作はjQueryを使用して実装されます（私のプロジェクトで使用され、必要に応じて純粋なJSに簡単に置き換えられます）。 フィールドにフォーカスがあるときにプレースホルダーを非表示にする場合は、CSSのみを実行できます。
jsfiddleの例を参照してください。
UPD
ヒントをありがとう。
変更点と説明：
- 純粋なCSSでは動作しません。JSなしでは実行できません
- JSでは、「input」イベントを使用する必要があります。 次に、コンテキストメニューを使用してクリップボードから貼り付けると、プレースホルダーも消えます。
<div id="textAreaWrap"> <textarea id="textArea"></textarea> <!-- Check here. If textarea has content - set for this div attribute style="display: none;" --> <div id="placeholderDiv">Multiline textarea<br> placeholder<br><br>that works in Firefox</div> </div>
#textAreaWrap { position: relative; background-color: white; } #textArea { position: relative; z-index: 1; width: 350px; height: 100px; min-height: 100px; padding: 6px 12px; resize: vertical; background-color: transparent; /* When set background-color: transparent - Firefox displays unpleasant textarea border. Set border style to fix it.*/ border: 1px solid #a5a5a5; } #placeholderDiv { position: absolute; top: 0; padding: 6px 13px; color: #a5a5a5; }
$(document).on('input', '#textArea', function () { if ($('#textArea').val()) { $('#placeholderDiv').hide(); } else { $('#placeholderDiv').show(); } });