Can you have multiline HTML5 placeholder text in a ?</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2011-08-25T11:00:49.137" class="fromnow">Aug 25 '11 at 11:00</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2021-04-10T20:25:58.493" datetime="2021-04-10T20:25:58.493">Apr 10 '21 at 20:25</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 130,159 times"> <span class="fc-light mr2">Viewed</span> 1.3e+01k times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="7189223" data-ownerid="326389" data-score="168"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="7189223"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="168">168</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I have ghost text in textfields that disappear when you focus on them using HTML5's placeholder attribute:</p> <pre><code><input type="text" name="email" placeholder="Enter email"/> </code></pre> <p>I want to use that same mechanism to have multiline placeholder text in a textarea, maybe something like this:</p> <pre><code><textarea name="story" placeholder="Enter story\n next line\n more"></textarea> </code></pre> <p>But those <code>\n</code>s show up in the text and don't cause newlines... Is there a way to have a multiline placeholder?</p> <p><strong><em>UPDATE</em></strong>: The only way I got this to work was utilizing the <a class="external-link" href="https://github.com/marioestrada/jQuery-Watermark">jQuery Watermark plugin</a>, which accepts HTML in the placeholder text:</p> <pre><code>$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false}); </code></pre></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/textarea" class="post-tag js-gps-track" title="show questions tagged 'textarea'" rel="tag">textarea</a> <a href="../../questions/tagged/forms" class="post-tag js-gps-track" title="show questions tagged 'forms'" rel="tag">forms</a> <a href="../../questions/tagged/placeholder" class="post-tag js-gps-track" title="show questions tagged 'placeholder'" rel="tag">placeholder</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2011-08-25T17:34:58.360" class="relativetime">Aug 25 '11 at 17:34</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">at.</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Aug 25 '11 at 11:00">asked Aug 25 '11 at 11:00</time> <a href="../../users/326389/at" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/326389.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="at." /> </a> <div class="s-user-card--info"> <a href="../../users/326389/at" class="s-user-card--link">at.</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">50,922</li> <li class="s-award-bling s-award-blinggold" title="104 gold badges">104</li> <li class="s-award-bling s-award-blingsilver" title="292 silver badges">292</li> <li class="s-award-bling s-award-blingbronze" title="461 bronze badges">461</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-7189223" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="7189223" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-30615871" class="comment js-comment " data-comment-id="30615871" data-comment-owner-id="709223" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment30615871_7189223"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">IE seems to handle it properly. Firefox OTOH just ignores the newlines</span> – <a href="../../users/709223/ekkis" title="9,804 reputation" class="comment-user ">ekkis</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment30615871_7189223"><span title="2013-12-10T02:26:09.517 License: CC BY-SA 3.0" class="relativetime-clean">Dec 10 '13 at 02:26</span></a></span> </div> </div> </li> <li id="comment-35288719" class="comment js-comment " data-comment-id="35288719" data-comment-owner-id="66503" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment35288719_7189223"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">http://stackoverflow.com/questions/7312623/insert-line-break-inside-placeholder-attribute-of-a-textarea is a very similar question with good answers too.</span> – <a href="../../users/66503/lloyd-dewolf" title="396 reputation" class="comment-user ">Lloyd Dewolf</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment35288719_7189223"><span title="2014-04-15T15:50:16.520 License: CC BY-SA 3.0" class="relativetime-clean">Apr 15 '14 at 15:50</span></a></span> </div> </div> </li> <li id="comment-108968131" class="comment js-comment " data-comment-id="108968131" data-comment-owner-id="670023" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment108968131_7189223"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">if you're encountering this and using js to set the value check css `white-space` to make sure it's set correctly e.g. pre-wrap</span> – <a href="../../users/670023/cory-mawhorter" title="1,583 reputation" class="comment-user ">Cory Mawhorter</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment108968131_7189223"><span title="2020-05-04T22:03:00.200 License: CC BY-SA 4.0" class="relativetime-clean">May 04 '20 at 22:03</span></a></span> </div> </div> </li> <li id="comment-108968647" class="comment js-comment " data-comment-id="108968647" data-comment-owner-id="1869660" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment108968647_7189223"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">From that other question: ` ` works everywhere except Safari.</span> – <a href="../../users/1869660/sphinxxx" title="12,484 reputation" class="comment-user ">Sphinxxx</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment108968647_7189223"><span title="2020-05-04T22:27:32.493 License: CC BY-SA 4.0" class="relativetime-clean">May 04 '20 at 22:27</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">16 Answers<span style="display:none;" itemprop="answerCount">16</span></h2> </div> </div> </div> <a name="7189563"></a> <div id="answer-7189563" class="answer accepted-answer" data-answerid="7189563" data-ownerid="58808" data-score="87" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="7189563"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="87">87</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>For <code><textarea></code>s <a class="external-link" href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-textarea-placeholder" rel="noreferrer">the spec</a> specifically outlines that carriage returns + line breaks in the placeholder attribute MUST be rendered as linebreaks by the browser.</p> <blockquote> <p>User agents should present this hint to the user when the element's value is the empty string and the control is not focused (e.g. by displaying it inside a blank unfocused control). All U+000D CARRIAGE RETURN U+000A LINE FEED character pairs (CRLF) in the hint, as well as all other U+000D CARRIAGE RETURN (CR) and U+000A LINE FEED (LF) characters in the hint, must be treated as line breaks when rendering the hint.</p> </blockquote> <p>Also reflected on MDN: <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder</a></p> <p>FWIW, when I try on Chrome 63.0.3239.132, it does indeed work as it says it should.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Aug 13 '19 at 03:38">edited Aug 13 '19 at 03:38</time> <a href="../../users/2288578/clonkex" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2288578.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Clonkex" /> </a> <div class="s-user-card--info"> <a href="../../users/2288578/clonkex" class="s-user-card--link">Clonkex</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">3,373</li> <li class="s-award-bling s-award-blinggold" title="7 gold badges">7</li> <li class="s-award-bling s-award-blingsilver" title="38 silver badges">38</li> <li class="s-award-bling s-award-blingbronze" title="55 bronze badges">55</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Aug 25 '11 at 11:27">answered Aug 25 '11 at 11:27</time> <a href="../../users/58808/ionut-g-stan" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/58808.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Ionuț G. Stan" /> </a> <div class="s-user-card--info"> <a href="../../users/58808/ionut-g-stan" class="s-user-card--link">Ionuț G. Stan</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">176,118</li> <li class="s-award-bling s-award-blinggold" title="18 gold badges">18</li> <li class="s-award-bling s-award-blingsilver" title="189 silver badges">189</li> <li class="s-award-bling s-award-bling__bronze" title="202 bronze badges">202</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-7189563" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="7189563" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-30615848" class="comment js-comment " data-comment-id="30615848" data-comment-owner-id="709223" data-comment-score="37"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">37</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment30615848_7189563"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">except that the title attribute does not behave the same way i.e. it does not show ghost content. in fact it would be perfectly appropriate for placeholders to support multiple lines for text areas since text areas are multi-line creatures. pity the spec doesn't allow it. I guess the hacks will have to do. sigh</span> – <a href="../../users/709223/ekkis" title="9,804 reputation" class="comment-user ">ekkis</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment30615848_7189563"><span title="2013-12-10T02:25:00.247 License: CC BY-SA 3.0" class="relativetime-clean">Dec 10 '13 at 02:25</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="25261886"></a> <div id="answer-25261886" class="answer " data-answerid="25261886" data-ownerid="956660" data-score="77" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="25261886"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="77">77</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>On <em>most</em> (see details below) browsers, editing the placeholder in javascript allows multiline placeholder. As it has been said, it's not compliant with the <a class="external-link" href="http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute" rel="noreferrer">specification</a> and you shouldn't expect it to work in the future (edit: it does work).</p> <p>This example replaces <em>all</em> multiline textarea's placeholder. </p><div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var textAreas = document.getElementsByTagName('textarea'); Array.prototype.forEach.call(textAreas, function(elem) { elem.placeholder = elem.placeholder.replace(/\\n/g, '\n'); });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea class="textAreaMultiline" placeholder="Hello, \nThis is multiline example \n\nHave Fun" rows="5" cols="35"></textarea></code></pre> </div> </div> <p><em><sub><a class="external-link" href="https://jsfiddle.net/qfvkLp6m/" rel="noreferrer">JsFiddle</a> snippet.</sub></em></p> Expected result <p><img alt="Expected result" src="../../images/3795127377.webp"/></p> <hr/> <p>Based on comments it seems some browser accepts this hack and others don't.<br/> This is the results of tests I ran (with <a class="external-link" href="http://browsertshots.org" rel="noreferrer">browsertshots</a> and <a class="external-link" href="http://browserstack.com" rel="noreferrer">browserstack</a>)</p> <ul> <li>Chrome: >= 35.0.1916.69</li> <li>Firefox: >= 35.0 (results varies on platform)</li> <li>IE: >= 10</li> <li>KHTML based browsers: 4.8</li> <li>Safari: No (tested = Safari 8.0.6 Mac OS X 10.8)</li> <li>Opera: No (tested <= 15.0.1147.72)</li> </ul> <p>Fused with theses <a class="external-link" href="http://www.w3schools.com/browsers/browsers_stats.asp" rel="noreferrer">statistics</a>, this means that it works on about <strong>88.7%</strong> of currently <em>(Oct 2015)</em> used browsers.</p> <p><em>Update</em>: Today, it works on at least <strong>94.4%</strong> of currently <em>(July 2018)</em> used browsers.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2020-07-15T07:12:39.687" class="relativetime">Jul 15 '20 at 07:12</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Cyrbil</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Aug 12 '14 at 10:21">answered Aug 12 '14 at 10:21</time> <a href="../../users/956660/cyrbil" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/956660.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Cyrbil" /> </a> <div class="s-user-card--info"> <a href="../../users/956660/cyrbil" class="s-user-card--link">Cyrbil</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">6,341</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="24 silver badge">24</li> <li class="s-award-bling s-award-blingbronze" title="40 bronze badge">40</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-25261886" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="25261886" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-41619043" class="comment js-comment " data-comment-id="41619043" data-comment-owner-id="267398" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment41619043_25261886"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">That jsfiddle example doesn't work at all... It's only multilined because the size of the textarea.</span> – <a href="../../users/267398/sebnukem" title="8,143 reputation" class="comment-user ">sebnukem</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment41619043_25261886"><span title="2014-10-21T17:30:22.870 License: CC BY-SA 3.0" class="relativetime-clean">Oct 21 '14 at 17:30</span></a></span> </div> </div> </li> <li id="comment-45343095" class="comment js-comment " data-comment-id="45343095" data-comment-owner-id="1772990" data-comment-score="3"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">3</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment45343095_25261886"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">There's a typo, but I can't edit because StackOverflow give me this "Edits must be at least 6 characters" error. Your class should be `multiline` not `multiligne`</span> – <a href="../../users/1772990/daniel-loureiro" title="4,595 reputation" class="comment-user ">Daniel Loureiro</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment45343095_25261886"><span title="2015-02-14T04:05:38.913 License: CC BY-SA 3.0" class="relativetime-clean">Feb 14 '15 at 04:05</span></a></span> </div> </div> </li> <li id="comment-48392293" class="comment js-comment " data-comment-id="48392293" data-comment-owner-id="956660" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment48392293_25261886"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@sebnukem: It works on most browsers that i had test out. And it's not a matter of textarea's size. Can you provide more information on the issue you had ?</span> – <a href="../../users/956660/cyrbil" title="6,341 reputation" class="comment-user ">Cyrbil</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment48392293_25261886"><span title="2015-05-09T15:40:36.493 License: CC BY-SA 3.0" class="relativetime-clean">May 09 '15 at 15:40</span></a></span> </div> </div> </li> <li id="comment-49960832" class="comment js-comment " data-comment-id="49960832" data-comment-owner-id="341458" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment49960832_25261886"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Doesn't work on safari it seems... - the \n disappears but everything is on a single line</span> – <a href="../../users/341458/hackeron" title="616 reputation" class="comment-user ">Hackeron</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment49960832_25261886"><span title="2015-06-21T12:20:55.737 License: CC BY-SA 3.0" class="relativetime-clean">Jun 21 '15 at 12:20</span></a></span> </div> </div> </li> <li id="comment-49980198" class="comment js-comment " data-comment-id="49980198" data-comment-owner-id="956660" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment49980198_25261886"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Hey @Hackeron thx for reporting it, I update my answer with tests for various browsers.</span> – <a href="../../users/956660/cyrbil" title="6,341 reputation" class="comment-user ">Cyrbil</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment49980198_25261886"><span title="2015-06-22T07:48:45.960 License: CC BY-SA 3.0" class="relativetime-clean">Jun 22 '15 at 07:48</span></a></span> </div> </div> </li> <li id="comment-51176489" class="comment js-comment " data-comment-id="51176489" data-comment-owner-id="2832282" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment51176489_25261886"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Firefox 39, Windows 8, couldn't make it work (through Rails .erb) :(</span> – <a href="../../users/2832282/cyril-duchon-doris" title="12,964 reputation" class="comment-user ">Cyril Duchon-Doris</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment51176489_25261886"><span title="2015-07-24T14:44:14.200 License: CC BY-SA 3.0" class="relativetime-clean">Jul 24 '15 at 14:44</span></a></span> </div> </div> </li> <li id="comment-51177127" class="comment js-comment " data-comment-id="51177127" data-comment-owner-id="956660" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment51177127_25261886"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@CyrilDD: The best option is to use a superposition of textarea & div, using events to simulate a multiline placeholder. These posts are just magic hack that are against the spec and are not guaranteed to work.</span> – <a href="../../users/956660/cyrbil" title="6,341 reputation" class="comment-user ">Cyrbil</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment51177127_25261886"><span title="2015-07-24T14:58:59.020 License: CC BY-SA 3.0" class="relativetime-clean">Jul 24 '15 at 14:58</span></a></span> </div> </div> </li> <li id="comment-72779119" class="comment js-comment " data-comment-id="72779119" data-comment-owner-id="956660" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment72779119_25261886"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">True, FF does not support it anymore for a while, all platforms.</span> – <a href="../../users/956660/cyrbil" title="6,341 reputation" class="comment-user ">Cyrbil</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment72779119_25261886"><span title="2017-03-16T13:06:27.887 License: CC BY-SA 3.0" class="relativetime-clean">Mar 16 '17 at 13:06</span></a></span> </div> </div> </li> <li id="comment-78598935" class="comment js-comment " data-comment-id="78598935" data-comment-owner-id="978690" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment78598935_25261886"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@DanielLoureiro Fixed :)</span> – <a href="../../users/978690/rap-2-h" title="30,204 reputation" class="comment-user ">rap-2-h</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment78598935_25261886"><span title="2017-08-22T14:39:09.227 License: CC BY-SA 3.0" class="relativetime-clean">Aug 22 '17 at 14:39</span></a></span> </div> </div> </li> <li id="comment-92866579" class="comment js-comment " data-comment-id="92866579" data-comment-owner-id="692098" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment92866579_25261886"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">It doesn't seem to work on the current Google Chrome for IOS version 70.0.3538.75. All the '\n' are replaced correctly, but the rendering is no character. For example placeholder="DATE\nRANGE" is rendered looking like "DATERANGE".</span> – <a href="../../users/692098/jroonk" title="1,376 reputation" class="comment-user ">Jroonk</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment92866579_25261886"><span title="2018-10-25T01:36:55.213 License: CC BY-SA 4.0" class="relativetime-clean">Oct 25 '18 at 01:36</span></a></span> </div> </div> </li> <li id="comment-92877124" class="comment js-comment " data-comment-id="92877124" data-comment-owner-id="956660" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment92877124_25261886"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Jroonk: I can confirm that. It's not due to chrome but to Apple forcing any browser to uses its IOS's `WKWebView`. Subsequently, any browser on IOS won't render this hack properly until `WKWebView` does.</span> – <a href="../../users/956660/cyrbil" title="6,341 reputation" class="comment-user ">Cyrbil</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment92877124_25261886"><span title="2018-10-25T09:26:51.217 License: CC BY-SA 4.0" class="relativetime-clean">Oct 25 '18 at 09:26</span></a></span> </div> </div> </li> <li id="comment-112794350" class="comment js-comment " data-comment-id="112794350" data-comment-owner-id="2057171" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment112794350_25261886"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">`works on at least 94.4% of browsers.` --- It doesn't work on iPhone browsers which I imagine is more than just 5.6% of browsers.</span> – <a href="../../users/2057171/albert-renshaw" title="17,282 reputation" class="comment-user ">Albert Renshaw</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment112794350_25261886"><span title="2020-09-08T01:33:10.853 License: CC BY-SA 4.0" class="relativetime-clean">Sep 08 '20 at 01:33</span></a></span> </div> </div> </li> <li id="comment-112833734" class="comment js-comment " data-comment-id="112833734" data-comment-owner-id="956660" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment112833734_25261886"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@AlbertRenshaw as you can see https://en.m.wikipedia.org/wiki/Usage_share_of_web_browsers. The problem is finding statistics that show WebKit and not Firefox/chrome/safari...</span> – <a href="../../users/956660/cyrbil" title="6,341 reputation" class="comment-user ">Cyrbil</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment112833734_25261886"><span title="2020-09-09T09:17:28.047 License: CC BY-SA 4.0" class="relativetime-clean">Sep 09 '20 at 09:17</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="8843665"></a> <div id="answer-8843665" class="answer " data-answerid="8843665" data-ownerid="538646" data-score="61" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="8843665"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="61">61</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I find that if you use a lot of spaces, the browser will wrap it properly. Don't worry about using an exact number of spaces, just throw a lot in there, and the browser should properly wrap to the first non space character on the next line.</p> <pre><code><textarea name="address" placeholder="1313 Mockingbird Ln Saginaw, MI 45100"></textarea> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 12 '12 at 23:06">answered Jan 12 '12 at 23:06</time> <a href="../../users/538646/thomas-hunter-ii" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/538646.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Thomas Hunter II" /> </a> <div class="s-user-card--info"> <a href="../../users/538646/thomas-hunter-ii" class="s-user-card--link">Thomas Hunter II</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">5,081</li> <li class="s-award-bling s-award-blinggold" title="7 gold badges">7</li> <li class="s-award-bling s-award-blingsilver" title="35 silver badges">35</li> <li class="s-award-bling s-award-bling__bronze" title="54 bronze badges">54</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-8843665" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="8843665" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-20179260" class="comment js-comment " data-comment-id="20179260" data-comment-owner-id="168012" data-comment-score="2"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">2</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment20179260_8843665"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Yep multiline placeholders are not supported crossbrowser, have found the latest safari does support but is definitely not supported on IOS5</span> – <a href="../../users/168012/tom" title="12,591 reputation" class="comment-user ">Tom</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment20179260_8843665"><span title="2013-01-23T14:57:51.123 License: CC BY-SA 3.0" class="relativetime-clean">Jan 23 '13 at 14:57</span></a></span> </div> </div> </li> <li id="comment-30615914" class="comment js-comment " data-comment-id="30615914" data-comment-owner-id="709223" data-comment-score="8"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">8</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment30615914_8843665"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">that doesn't work for me in either IE nor Firefox Windows. it just inserts the spaces I asked for it to</span> – <a href="../../users/709223/ekkis" title="9,804 reputation" class="comment-user ">ekkis</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment30615914_8843665"><span title="2013-12-10T02:29:12.700 License: CC BY-SA 3.0" class="relativetime-clean">Dec 10 '13 at 02:29</span></a></span> </div> </div> </li> <li id="comment-37972666" class="comment js-comment " data-comment-id="37972666" data-comment-owner-id="1835727" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37972666_8843665"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Chrome 37 is displaying placeholder text in a textarea without stripping the newlines. Does anyone know what the name of the 'feature' is so that I can a) look for it, and b) test for it?</span> – <a href="../../users/1835727/ben" title="12,614 reputation" class="comment-user ">Ben</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment37972666_8843665"><span title="2014-07-02T06:35:54.993 License: CC BY-SA 3.0" class="relativetime-clean">Jul 02 '14 at 06:35</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="12886761"></a> <div id="answer-12886761" class="answer " data-answerid="12886761" data-ownerid="2094949" data-score="23" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="12886761"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="23">23</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>There is actual a hack which makes it possible to add multiline placeholders in Webkit browsers, Chrome used to work but in more recent versions they removed it:</p> <hr/> <p>First add the first line of your placeholder to the html5 as usual</p> <pre><code><textarea id="text1" placeholder="Line 1" rows="10"></textarea> </code></pre> <p>then add the rest of the line by css:</p> <pre><code>#text1::-webkit-input-placeholder::after { display:block; content:"Line 2\A Line 3"; } </code></pre> <hr/> <p>If you want to keep your lines at one place you can try the following. The downside of this is that other browsers than chrome, safari, webkit-etc. don't even show the first line:</p> <pre><code><textarea id="text2" placeholder="." rows="10"></textarea> </code></pre> <p>then add the rest of the line by css:</p> <pre><code>#text2::-webkit-input-placeholder{ color:transparent; } #text2::-webkit-input-placeholder::before { color:#666; content:"Line 1\A Line 2\A Line 3\A"; } </code></pre> <hr/> <p><strong><a class="external-link" href="http://jsfiddle.net/Z3tFG/1/" rel="nofollow noreferrer">Demo Fiddle</a></strong></p> <p>It would be very great, if s.o. could get a similar demo working on Firefox.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2017-02-23T11:15:15.627" class="relativetime">Feb 23 '17 at 11:15</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Gottox</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Oct 14 '12 at 21:36">answered Oct 14 '12 at 21:36</time> <a href="../../users/2094949/gottox" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2094949.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Gottox" /> </a> <div class="s-user-card--info"> <a href="../../users/2094949/gottox" class="s-user-card--link">Gottox</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">682</li> <li class="s-award-bling s-award-blingsilver" title="6 silver badges">6</li> <li class="s-award-bling s-award-blingbronze" title="15 bronze badges">15</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-12886761" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="12886761" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-30616499" class="comment js-comment " data-comment-id="30616499" data-comment-owner-id="709223" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment30616499_12886761"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">thanks for providing the fiddle link. it makes it easy to verify behaviour in various browsers. on IE 10 both versions fail, as well as on FF 12 (Windows). pity that. Safari 6.1 works :(</span> – <a href="../../users/709223/ekkis" title="9,804 reputation" class="comment-user ">ekkis</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment30616499_12886761"><span title="2013-12-10T02:59:32.287 License: CC BY-SA 3.0" class="relativetime-clean">Dec 10 '13 at 02:59</span></a></span> </div> </div> </li> <li id="comment-71934954" class="comment js-comment " data-comment-id="71934954" data-comment-owner-id="1626250" data-comment-score="2"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">2</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment71934954_12886761"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">No longer works in Chrome - for a long time now, I'd assume.</span> – <a href="../../users/1626250/mike-rockett" title="8,947 reputation" class="comment-user ">Mike Rockétt</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment71934954_12886761"><span title="2017-02-22T14:08:49.967 License: CC BY-SA 3.0" class="relativetime-clean">Feb 22 '17 at 14:08</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="54286051"></a> <div id="answer-54286051" class="answer " data-answerid="54286051" data-ownerid="308204" data-score="23" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="54286051"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="23">23</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p><a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea" rel="noreferrer">According to MDN</a>, </p> <blockquote> <p>Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.</p> </blockquote> <p>This means that if you just jump to a new line, it should be rendered correctly. I.e.</p> <pre><code><textarea placeholder="The car horn plays La Cucaracha. You can choose your own color as long as it's black. The GPS has the voice of Darth Vader. "></textarea> </code></pre> <p>should render like this:</p> <p><a class="external-link" href="https://i.stack.imgur.com/NAMD3.png" rel="noreferrer"><img alt="enter image description here" src="../../images/3786017837.webp"/></a></p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 21 '19 at 08:38">answered Jan 21 '19 at 08:38</time> <a href="../../users/308204/mathieu-dhondt" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/308204.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mathieu Dhondt" /> </a> <div class="s-user-card--info"> <a href="../../users/308204/mathieu-dhondt" class="s-user-card--link">Mathieu Dhondt</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">8,405</li> <li class="s-award-bling s-award-blinggold" title="5 gold badges">5</li> <li class="s-award-bling s-award-blingsilver" title="37 silver badges">37</li> <li class="s-award-bling s-award-bling__bronze" title="58 bronze badges">58</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-54286051" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="54286051" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-120890923" class="comment js-comment " data-comment-id="120890923" data-comment-owner-id="1066234" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment120890923_54286051"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Works in the latest Chrome.</span> – <a href="../../users/1066234/avatar" title="14,622 reputation" class="comment-user ">Avatar</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment120890923_54286051"><span title="2021-07-16T05:44:05.350 License: CC BY-SA 4.0" class="relativetime-clean">Jul 16 '21 at 05:44</span></a></span> </div> </div> </li> <li id="comment-129737311" class="comment js-comment " data-comment-id="129737311" data-comment-owner-id="5548239" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment129737311_54286051"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This method is the easiest to implement. It honors tabs too.</span> – <a href="../../users/5548239/dan-swain" title="2,910 reputation" class="comment-user ">Dan Swain</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment129737311_54286051"><span title="2022-08-23T23:30:41.710 License: CC BY-SA 4.0" class="relativetime-clean">Aug 23 '22 at 23:30</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="50769039"></a> <div id="answer-50769039" class="answer " data-answerid="50769039" data-ownerid="2237142" data-score="10" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="50769039"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="10">10</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>React:</p> <p>If you are using React, you can do it as follows:</p> <pre><code>placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'} </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jun 08 '18 at 22:17">answered Jun 08 '18 at 22:17</time> <a href="../../users/2237142/firetiger77" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2237142.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="firetiger77" /> </a> <div class="s-user-card--info"> <a href="../../users/2237142/firetiger77" class="s-user-card--link">firetiger77</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">351</li> <li class="s-award-bling s-award-blingsilver" title="3 silver badges">3</li> <li class="s-award-bling s-award-blingbronze" title="9 bronze badges">9</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-50769039" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="50769039" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-129017696" class="comment js-comment " data-comment-id="129017696" data-comment-owner-id="4323201" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment129017696_50769039"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I couldn't get this working in React 18. Not sure why.</span> – <a href="../../users/4323201/ryannerd" title="3,059 reputation" class="comment-user ">RyanNerd</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment129017696_50769039"><span title="2022-07-20T09:43:05.117 License: CC BY-SA 4.0" class="relativetime-clean">Jul 20 '22 at 09:43</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="38128759"></a> <div id="answer-38128759" class="answer " data-answerid="38128759" data-ownerid="2643192" data-score="9" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="38128759"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="9">9</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>If you're using AngularJS, you can simply use braces to place whatever you'd like in it: <a class="external-link" href="http://jsfiddle.net/rosstroha/036Lfhes/1/" rel="noreferrer">Here's a fiddle.</a></p> <pre><code><textarea rows="6" cols="45" placeholder="{{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jun 30 '16 at 16:29">answered Jun 30 '16 at 16:29</time> <a href="../../users/2643192/ross-troha" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2643192.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="ross_troha" /> </a> <div class="s-user-card--info"> <a href="../../users/2643192/ross-troha" class="s-user-card--link">ross_troha</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">165</li> <li class="s-award-bling s-award-blingsilver" title="2 silver badges">2</li> <li class="s-award-bling s-award-blingbronze" title="10 bronze badges">10</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-38128759" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="38128759" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-78352404" class="comment js-comment " data-comment-id="78352404" data-comment-owner-id="1730278" data-comment-score="4"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">4</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment78352404_38128759"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I am using similar approach but it is not working in Safari and Firefox</span> – <a href="../../users/1730278/stan" title="1,513 reputation" class="comment-user ">Stan</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment78352404_38128759"><span title="2017-08-15T16:18:09.973 License: CC BY-SA 3.0" class="relativetime-clean">Aug 15 '17 at 16:18</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="64416285"></a> <div id="answer-64416285" class="answer " data-answerid="64416285" data-ownerid="1854366" data-score="7" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="64416285"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="7">7</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>This can apparently be done by just typing normally,</p> <p></p><div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea name="" id="" placeholder="Hello awesome world. I will break line now Yup! Line break seems to work."></textarea></code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Oct 18 '20 at 17:30">answered Oct 18 '20 at 17:30</time> <a href="../../users/1854366/uzair-hayat" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1854366.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Uzair Hayat" /> </a> <div class="s-user-card--info"> <a href="../../users/1854366/uzair-hayat" class="s-user-card--link">Uzair Hayat</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">518</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="8 silver badge">8</li> <li class="s-award-bling s-award-blingbronze" title="21 bronze badge">21</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="63232874"></a> <div id="answer-63232874" class="answer " data-answerid="63232874" data-ownerid="1164966" data-score="3" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="63232874"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="3">3</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>With <a class="external-link" href="https://vuejs.org/" rel="nofollow noreferrer">Vue.js</a>:</p> <pre><code><textarea name="story" :placeholder="'Enter story\n next line\n more'"></textarea> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Aug 03 '20 at 16:00">answered Aug 03 '20 at 16:00</time> <a href="../../users/1164966/benoit-blanchon" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1164966.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Benoit Blanchon" /> </a> <div class="s-user-card--info"> <a href="../../users/1164966/benoit-blanchon" class="s-user-card--link">Benoit Blanchon</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">13,364</li> <li class="s-award-bling s-award-blinggold" title="4 gold badges">4</li> <li class="s-award-bling s-award-blingsilver" title="73 silver badges">73</li> <li class="s-award-bling s-award-blingbronze" title="81 bronze badges">81</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-63232874" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="63232874" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-116363088" class="comment js-comment " data-comment-id="116363088" data-comment-owner-id="1132557" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment116363088_63232874"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">another way `:placeholder="\`/robots.txt \r\n /google-analytics-auth.html\`"`</span> – <a href="../../users/1132557/kingsley" title="977 reputation" class="comment-user ">Kingsley</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment116363088_63232874"><span title="2021-01-20T16:24:26.883 License: CC BY-SA 4.0" class="relativetime-clean">Jan 20 '21 at 16:24</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="7189566"></a> <div id="answer-7189566" class="answer " data-answerid="7189566" data-ownerid="298723" data-score="3" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="7189566"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="3">3</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>The <a class="external-link" href="http://dev.w3.org/html5/spec/the-button-element.html#attr-textarea-placeholder" rel="nofollow">html5 spec</a> expressly rejects new lines in the place holder field. Versions of Webkit <em>/will/</em> insert new lines when presented with line feeds in the placeholder, however this is incorrect behaviour and should not be relied upon.</p> <p>I guess paragraphs aren't brief enough for w3 ;)</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Aug 25 '11 at 11:27">answered Aug 25 '11 at 11:27</time> <a href="../../users/298723/silent-penguin" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/298723.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Silent Penguin" /> </a> <div class="s-user-card--info"> <a href="../../users/298723/silent-penguin" class="s-user-card--link">Silent Penguin</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">184</li> <li class="s-award-bling s-award-bling__bronze" title="3 bronze badges">3</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-7189566" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="7189566" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-10569074" class="comment js-comment " data-comment-id="10569074" data-comment-owner-id="314056" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment10569074_7189566"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Webkit's behavior is not incorrect since the specification does not say what must happen if CR/LF do exist.</span> – <a href="../../users/314056/christian" title="27,509 reputation" class="comment-user ">Christian</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment10569074_7189566"><span title="2011-12-16T11:26:15.617 License: CC BY-SA 3.0" class="relativetime-clean">Dec 16 '11 at 11:26</span></a></span> </div> </div> </li> <li id="comment-36817026" class="comment js-comment " data-comment-id="36817026" data-comment-owner-id="12559" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment36817026_7189566"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Christian It does now, it says "User agents should present this hint to the user, after having stripped line breaks from it...". It says this about stripping line breaks: "When a user agent is to strip line breaks from a string, the user agent must remove any "LF" (U+000A) and "CR" (U+000D) characters from that string.".</span> – <a href="../../users/12559/richard-turner" title="12,506 reputation" class="comment-user ">Richard Turner</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment36817026_7189566"><span title="2014-05-28T10:51:26.773 License: CC BY-SA 3.0" class="relativetime-clean">May 28 '14 at 10:51</span></a></span> </div> </div> </li> <li id="comment-101413990" class="comment js-comment " data-comment-id="101413990" data-comment-owner-id="2288578" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment101413990_7189566"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This answer is no longer true. The [spec](http://dev.w3.org/html5/spec/the-button-element.html#attr-textarea-placeholder) now expressly requires that linebreaks in the placeholder be rendered as linebreaks.</span> – <a href="../../users/2288578/clonkex" title="3,373 reputation" class="comment-user ">Clonkex</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment101413990_7189566"><span title="2019-08-13T03:34:28.843 License: CC BY-SA 4.0" class="relativetime-clean">Aug 13 '19 at 03:34</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="30801020"></a> <div id="answer-30801020" class="answer " data-answerid="30801020" data-ownerid="2746472" data-score="2" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="30801020"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="2">2</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>If your <code>textarea</code> have a static width you can use combination of non-breaking space and automatic textarea wrapping. Just replace spaces to nbsp for every line and make sure that two neighbour lines can't fit into one. In practice <code>line length > cols/2</code>.</p> <p>This isn't the best way, but could be the only cross-browser solution.</p> <p></p><div class="snippet" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea class="textAreaMultiligne" placeholder="Hello,       This is multiligne example Have Fun    " rows="5" cols="35"></textarea></code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jun 12 '15 at 10:38">answered Jun 12 '15 at 10:38</time> <a href="../../users/2746472/krzysiek" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2746472.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Krzysiek" /> </a> <div class="s-user-card--info"> <a href="../../users/2746472/krzysiek" class="s-user-card--link">Krzysiek</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,494</li> <li class="s-award-bling s-award-blingsilver" title="16 silver badges">16</li> <li class="s-award-bling s-award-blingbronze" title="20 bronze badges">20</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="23541358"></a> <div id="answer-23541358" class="answer " data-answerid="23541358" data-ownerid="1856717" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="23541358"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You can try using CSS, it works for me. The attribute <code>placeholder=" "</code> is required here.</p> <pre><code><textarea id="myID" placeholder=" "></textarea> <style> #myID::-webkit-input-placeholder::before { content: "1st line...\A2nd line...\A3rd line..."; } </style> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2014-05-08T16:23:45.350" class="relativetime">May 08 '14 at 16:23</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Jeffrey Neo</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered May 08 '14 at 12:09">answered May 08 '14 at 12:09</time> <a href="../../users/1856717/jeffrey-neo" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1856717.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jeffrey Neo" /> </a> <div class="s-user-card--info"> <a href="../../users/1856717/jeffrey-neo" class="s-user-card--link">Jeffrey Neo</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">3,693</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="26 silver badges">26</li> <li class="s-award-bling s-award-blingbronze" title="30 bronze badges">30</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="50643472"></a> <div id="answer-50643472" class="answer " data-answerid="50643472" data-ownerid="7198881" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="50643472"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>in php with function chr(13) :</p> <pre><code>echo '<textarea class="form-control" rows="5" style="width:100%;" name="responsable" placeholder="NOM prénom du responsable légal'.chr(13).'Adresse'.chr(13).'CP VILLE'.chr(13).'Téléphone'.chr(13).'Adresse de messagerie" id="responsable"></textarea>'; </code></pre> <p>The ASCII character code 13 chr(13) is called a Carriage Return or CR</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2021-02-16T09:38:59.517" class="relativetime">Feb 16 '21 at 09:38</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Vlad</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jun 01 '18 at 12:29">answered Jun 01 '18 at 12:29</time> <a href="../../users/7198881/vlad" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/7198881.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Vlad" /> </a> <div class="s-user-card--info"> <a href="../../users/7198881/vlad" class="s-user-card--link">Vlad</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">365</li> <li class="s-award-bling s-award-blingsilver" title="3 silver badges">3</li> <li class="s-award-bling s-award-bling__bronze" title="6 bronze badges">6</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-50643472" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="50643472" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-115516184" class="comment js-comment " data-comment-id="115516184" data-comment-owner-id="11812744" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment115516184_50643472"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This worked for me but can you please explain the logic or theory behind it?</span> – <a href="../../users/11812744/nafiu-lawal" title="447 reputation" class="comment-user ">Nafiu Lawal</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment115516184_50643472"><span title="2020-12-17T12:41:17.097 License: CC BY-SA 4.0" class="relativetime-clean">Dec 17 '20 at 12:41</span></a></span> </div> </div> </li> <li id="comment-134021572" class="comment js-comment " data-comment-id="134021572" data-comment-owner-id="1262979" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment134021572_50643472"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This is complete nonsense. PHP won't parse the `chr(13)` tags with this syntax; even if it did, this would be just a more complicated way of just putting `\r` into the string; and obviously, this ignores all the previously stated compatibility problems and, indeed, the actual question.</span> – <a href="../../users/1262979/fbitterlich" title="882 reputation" class="comment-user ">fbitterlich</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea#comment134021572_50643472"><span title="2023-04-11T16:21:13.060 License: CC BY-SA 4.0" class="relativetime-clean">Apr 11 '23 at 16:21</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="29537282"></a> <div id="answer-29537282" class="answer " data-answerid="29537282" data-ownerid="4078503" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="29537282"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p><strong>Bootstrap + contenteditable + multiline placeholder</strong></p> <p>Demo: <a class="external-link" href="https://jsfiddle.net/39mptojs/4/" rel="nofollow">https://jsfiddle.net/39mptojs/4/</a></p> <p>based on the @cyrbil and @daniel answer</p> <p>Using Bootstrap, jQuery and <a class="external-link" href="https://github.com/gr2m/bootstrap-expandable-input" rel="nofollow">https://github.com/gr2m/bootstrap-expandable-input</a> to enable placeholder in contenteditable.</p> <p>Using "placeholder replace" javascript and adding "white-space: pre" to css, multiline placeholder is shown.</p> <p>Html:</p> <pre><code><div class="form-group"> <label for="exampleContenteditable">Example contenteditable</label> <div id="exampleContenteditable" contenteditable="true" placeholder="test\nmultiple line\nhere\n\nTested on Windows in Chrome 41, Firefox 36, IE 11, Safari 5.1.7 ...\nCredits StackOveflow: .placeholder.replace() trick, white-space:pre" class="form-control"> </div> </div> </code></pre> <p>Javascript:</p> <pre><code>$(document).ready(function() { $('div[contenteditable="true"]').each(function() { var s=$(this).attr('placeholder'); if (s) { var s1=s.replace(/\\n/g, String.fromCharCode(10)); $(this).attr('placeholder',s1); } }); }); </code></pre> <p>Css:</p> <pre><code>.form-control[contenteditable="true"] { border:1px solid rgb(238, 238, 238); padding:3px 3px 3px 3px; white-space: pre !important; height:auto !important; min-height:38px; } .form-control[contenteditable="true"]:focus { border-color:#66afe9; } </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Apr 11 '15 at 19:35">edited Apr 11 '15 at 19:35</time> <a href="../../users/2057919/elixenide" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2057919.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="elixenide" /> </a> <div class="s-user-card--info"> <a href="../../users/2057919/elixenide" class="s-user-card--link">elixenide</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">44,308</li> <li class="s-award-bling s-award-blinggold" title="16 gold badges">16</li> <li class="s-award-bling s-award-blingsilver" title="74 silver badges">74</li> <li class="s-award-bling s-award-blingbronze" title="100 bronze badges">100</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Apr 09 '15 at 11:27">answered Apr 09 '15 at 11:27</time> <a href="../../users/4078503/miha-pirnat" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4078503.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Miha Pirnat" /> </a> <div class="s-user-card--info"> <a href="../../users/4078503/miha-pirnat" class="s-user-card--link">Miha Pirnat</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">111</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> <li class="s-award-bling s-award-blingbronze" title="7 bronze badges">7</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="67038923"></a> <div id="answer-67038923" class="answer " data-answerid="67038923" data-ownerid="2014056" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="67038923"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>If you're using a framework like Aurelia that allows one to bind view-model properties to HTML5 element properties, then you can do the following:</p> <pre class="lang-html prettyprint-override"><code><textarea placeholder.bind="placeholder"></textarea> </code></pre> <pre class="lang-js prettyprint-override"><code>export class MyClass { placeholder = 'This is a \r\n multiline placeholder.' } </code></pre> <p>In this case the carriage return and line feed is respected when bound to the element.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Apr 10 '21 at 20:25">answered Apr 10 '21 at 20:25</time> <a href="../../users/2014056/jp-damstra" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2014056.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="JP Damstra" /> </a> <div class="s-user-card--info"> <a href="../../users/2014056/jp-damstra" class="s-user-card--link">JP Damstra</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">545</li> <li class="s-award-bling s-award-blingsilver" title="7 silver badges">7</li> <li class="s-award-bling s-award-blingbronze" title="25 bronze badges">25</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="43119363"></a> <div id="answer-43119363" class="answer " data-answerid="43119363" data-ownerid="1779106" data-score="-1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="43119363"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="-1">-1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Watermark solution in the original post works great. Thanks for it. In case anyone needs it, here is an angular directive for it.</p> <pre><code>(function () { 'use strict'; angular.module('app') .directive('placeholder', function () { return { restrict: 'A', link: function (scope, element, attributes) { if (element.prop('nodeName') === 'TEXTAREA') { var placeholderText = attributes.placeholder.trim(); if (placeholderText.length) { // support for both '\n' symbol and an actual newline in the placeholder element var placeholderLines = Array.prototype.concat .apply([], placeholderText.split('\n').map(line => line.split('\\n'))) .map(line => line.trim()); if (placeholderLines.length > 1) { element.watermark(placeholderLines.join('<br>\n')); } } } } }; }); }()); </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 30 '17 at 13:29">answered Mar 30 '17 at 13:29</time> <a href="../../users/1779106/yura-fedoriv" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1779106.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Yura Fedoriv" /> </a> <div class="s-user-card--info"> <a href="../../users/1779106/yura-fedoriv" class="s-user-card--link">Yura Fedoriv</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">309</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="4 silver badge">4</li> <li class="s-award-bling s-award-bling__bronze" title="6 bronze badge">6</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-linked"> <h4 id="h-linked">Linked</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">-1</div></a> <a href="../../questions/28503686/new-line-inside-textarea-placeholder-via-jquery" class="question-hyperlink">New line inside textarea placeholder via jQuery</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/29621205/multiline-in-placeholders-in-textareas" class="question-hyperlink">multiline in placeholders in textareas</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">1</div></a> <a href="../../questions/30890994/user-clicks-in-an-input-field-and-the-value-disappear" class="question-hyperlink">User clicks in an input field and the value disappear</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">0</div></a> <a href="../../questions/32211638/placeholder-text-only-visible-in-internet-explorer" class="question-hyperlink">Placeholder text only visible in Internet Explorer</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">1</div></a> <a href="../../questions/37437942/how-to-add-multi-line-place-holder-text-in-textarea" class="question-hyperlink">How to add multi line place holder text in textarea?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/38439558/how-to-ave-multiple-placeholders-in-a-single-textarea-of-an-extjs-form" class="question-hyperlink">How to ave multiple placeholders in a single textarea of an Extjs form</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">1</div></a> <a href="../../questions/45705370/is-it-possible-to-have-a-multiline-placeholder-in-a-textbox-asp-net" class="question-hyperlink">Is it possible to have a multiline placeholder in a textbox ASP.NET?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">0</div></a> <a href="../../questions/53164222/angular-io-adding-multiple-lines-in-placeholder" class="question-hyperlink">Angular io: Adding multiple lines in placeholder</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">266</div></a> <a href="../../questions/7312623/insert-line-break-inside-placeholder-attribute-of-a-textarea" class="question-hyperlink">Insert line break inside placeholder attribute of a textarea?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">2</div></a> <a href="../../questions/64815309/multiline-placeholder-in-textarea-for-safari-and-firefox" class="question-hyperlink">Multiline placeholder in textarea for safari and firefox</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">1</div></a> <a href="../../questions/68312515/how-we-can-add-multiline-placeholder-in-text-area-input-in-safari-browser" class="question-hyperlink">how we can add multiline placeholder in text area input in safari browser?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">4</div></a> <a href="../../questions/8457823/what-s-the-rationale-for-not-allowing-multiline-placeholders-in-html5" class="question-hyperlink">What's the rationale for not allowing multiline placeholders in HTML5?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">9</div></a> <a href="../../questions/16288971/line-break-for-a-string-placeholder-in-ruby" class="question-hyperlink">line break for a string placeholder in ruby</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">2</div></a> <a href="../../questions/17563620/placeholder-text-getting-cut-inside-a-textarea" class="question-hyperlink">placeholder text getting cut inside a textarea</a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>