여러 줄로 된 HTML5 자리 표시 자 텍스트를

여러 줄로 된 HTML5 자리 표시 자 텍스트를 ?</h2> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <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 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> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p>For <code><textarea></code>s <a href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-textarea-placeholder" rel="nofollow 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 href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder" rel="nofollow 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> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p>On <em>most</em> (see detail below) browsers, editing the placeholder in javascript do allows multiline placeholder. As it has been said, it's not compliant with the <a href="http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute" rel="nofollow noreferrer">specification</a> and you shouldn't expect it to work in the future (edit: it does work).</p> <p>This example replace <em>all</em> multiline textarea's placeholder. </p> <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <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></p> <p><em>_{<a href="https://jsfiddle.net/qfvkLp6m/" rel="nofollow noreferrer">JsFiddle</a> snippet.}</em></p> Expected result <p><img src="https://i.stack.imgur.com/5DUfC.png" alt="Expected result"></p> <hr> <p>Based on comments it seems some browser accepts this hack and others don't.<br> This is the result of tests I ran (with <a href="http://browsertshots.org" rel="nofollow noreferrer">browsertshots</a> and <a href="http://browserstack.com" rel="nofollow 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>Base on <a href="http://www.w3schools.com/browsers/browsers_stats.asp" rel="nofollow 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> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <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> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <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 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> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p>If you're using AngularJS, you can simply use braces to place whatever you'd like in it: <a 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> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p>The <a 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> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <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-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea class="textAreaMultiligne" placeholder="Hello,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This&nbsp;is&nbsp;multiligne&nbsp;example Have&nbsp;Fun&nbsp;&nbsp;&nbsp;&nbsp;" rows="5" cols="35"></textarea></code></pre> </div> </div> <p></p> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <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> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <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> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea" rel="nofollow 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 href="https://i.stack.imgur.com/NAMD3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NAMD3.png" alt="enter image description here"></a></p> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p>I do not think that is possible with html/css alone. Might be possible using JavaScript or some other kind of hack - extra spaces to push the text to the next line, etc.</p> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p><strong>Bootstrap + contenteditable + multiline placeholder</strong></p> <p>Demo: <a 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 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> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <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> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <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> <p>참고URL : <a href='https://stackoverflow.com/questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea' target='_blank' rel='noopener'>https://stackoverflow.com/questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea</a></p>