A multi-line textarea placeholder that works in Firefox

It was necessary to make a multi-line placeholder in the textarea. It turned out that Firefox, unlike all other modern browsers, does not support line breaks in the placeholder element. Although he does this in accordance with the W3C specification - it does not add joy.

All googled solutions did not like. I didn't want to install JQuery plug-ins just for the sake of line breaks in Firefox. I decided to try to make my placeholder in the auxiliary unit. The result was such a simple solution that works in all browsers and provides ample opportunities for customization of placeholder.

Standard behavior is implemented using jQuery (used in my project, if necessary, is easily replaced with pure JS). If you like to hide the placeholder when the field gets into focus, then you can do without CSS.
')
See an example on jsfiddle.

UPD
Thanks gwer for the tips.

Changes and clarifications:

• on pure CSS will not work, can not do without JS
• in JS you need to use the 'input' event. Then the placeholder disappears when pasting from the clipboard via the context menu.

<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(); } });