blocks|key|255272|text|不要认为你被允许这样做：http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|255273|相关内容(重点是我的)：|255274|255275|占位符属性表示一个简短提示(单词或短语)，用于在控件没有值时帮助用户输入数据。提示可以是样本值或预期格式的简短描述。属性(如果指定)的值必须不包含U%2B000A换行符(LF)或U%2B000D回车(CR)字符。|blockquote|style|BOLD|255276|255277|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute^0|C|1R|0|0|0|0|1M|18|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]|$1|G|3|H|5|I|7|10|8|@$A|11|B|12|J|K]]|9|@]|C|$]]|$1|L|3|-4|5|6|7|13|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>Don't think you're allowed to do that: <a href="http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute">http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute</a></p>

<p>The relevant content (emphasis mine):</p>

<blockquote>
  <p>The placeholder attribute represents a <em>short</em> hint (a word or short
  phrase) intended to aid the user with data entry when the control has
  no value. A hint could be a sample value or a brief description of the
  expected format. <strong>The attribute, if specified, must have a value that
  contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR)
  characters.</strong></p>
</blockquote>


blocks|key|257528|text|您可以将文本添加为value，这将考虑到换行符\n。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|257529|$('textarea').attr('value',+'This+is+a+line+\nthis+should+be+a+new+line');|code-block|syntax|javascript|257530|然后，您可以在focus上删除它，然后在blur上重新应用它(如果为空)。像这样的东西|257531|var+placeholder+=+'This+is+a+line+\nthis+should+be+a+new+line';
$('textarea').attr('value',+placeholder);

$('textarea').focus(function(){
++++if($(this).val()+===+placeholder){
++++++++$(this).attr('value',+'');
++++}
});

$('textarea').blur(function(){
++++if($(this).val()+===''){
++++++++$(this).attr('value',+placeholder);
++++}++++
});|257532|示例：+http://jsfiddle.net/airandfingers/pdXRx/247/|BOLD|257533|不是纯粹的CSS，也不是干净的，但确实有效。|257534|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/airandfingers/pdXRx/247/^0|9|5|N|2|0|0|7|5|K|4|0|0|0|3|4|18|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1D|8|@$9|1E|A|1F|B|Q]]|D|@$9|1G|A|1H|1|1I]]|E|$]]|$1|R|3|S|5|6|7|1J|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>What you could do is add the text as <code>value</code>, which respects the line break <code>\n</code>.</p>

<pre><code>$('textarea').attr('value', 'This is a line \nthis should be a new line');
</code></pre>

<p>Then you could remove it on <code>focus</code> and apply it back (if empty) on <code>blur</code>.  Something like this</p>

<pre><code>var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);

$('textarea').focus(function(){
    if($(this).val() === placeholder){
        $(this).attr('value', '');
    }
});

$('textarea').blur(function(){
    if($(this).val() ===''){
        $(this).attr('value', placeholder);
    }    
});
</code></pre>

<p><strong>Example:</strong> <a href="http://jsfiddle.net/airandfingers/pdXRx/247/" rel="noreferrer">http://jsfiddle.net/airandfingers/pdXRx/247/</a></p>

<p>Not pure CSS and not <em>clean</em> but does the trick.</p>


blocks|key|257536|text|你不能用纯超文本标记语言做到这一点，但是这个jQuery插件可以让你做到这一点：https://github.com/bradjasper/jQuery-Placeholder-Newlines|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|257537|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/bradjasper/jQuery-Placeholder-Newlines^0|14|1L|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>You can't do it with pure HTML, but this jQuery plugin will let you: <a href="https://github.com/bradjasper/jQuery-Placeholder-Newlines" rel="noreferrer">https://github.com/bradjasper/jQuery-Placeholder-Newlines</a></p>


blocks|key|255309|text|更新(2016年1月)：这个漂亮的小技巧可能不再适用于所有浏览器，所以我有了一个新的解决方案，下面只有一点javascript。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|255310|255311|一个不错的小黑客|255312|这感觉并不好，但你可以把新的行放在html中。如下所示：|255313|​|255314|<textarea+rows="6"+id="myAddress"+type="text"+placeholder="My+Awesome+House,
1+Long+St
London
Postcode
UK"></textarea>|code-block|syntax|javascript|255315|255316|请注意，每一行都在一个新行上(未换行)，每个“制表符”缩进为4个空格。诚然，这不是一个非常好的方法，但它似乎是有效的：|255317|http://jsfiddle.net/01taylop/HDfju/|255318|255319|根据文本区域的宽度，每一行的缩进级别可能会有所不同。|unordered-list-item|255320|在css中使用resize:+none;非常重要，这样文本区域的大小才是固定的(请参阅jsfiddle)。|CODE|255321|255322|当你想要一个新行时，按两次Alternatively+(这样你的“新行”之间就会有一个空行。创建的“空行”需要有足够的制表符/空格，以便与文本区域的宽度相等。如果你有太多，这似乎无关紧要，你只是需要足够的。这太脏了，而且可能不符合浏览器的要求。我希望有一个更简单的方法！|255323|255324|更好的解决方案|255325|查看JSFiddle。|255326|javascript用于更改文本区域的背景颜色，隐藏或显示占位符appropriately.|255327|The输入和占位符必须具有相同的字体大小，因此有两个混合。|255328|
|255329|文本区域上的box-sizing和display:+block属性很重要，或者它后面的div不是相同的javascript+resize:+vertical和文本区域上的min-height也很重要-注意占位符文本如何换行和扩展文本区域将保持白色背景。但是，在展开文本区horizontally.|255330|255331|Just时注释掉resize属性会导致问题。请确保文本区的最小高度足以覆盖整个占位符的最小宽度。**|255332|255333|255334|📷|atomic|255335|255336|HTML：|255337|<form>
++<input+type='text'+placeholder='First+Name'+/>
++<input+type='text'+placeholder='Last+Name'+/>
++<div+class='textarea-placeholder'>
++++<textarea></textarea>
++++<div>
++++++First+Line
++++++<br+/>+Second+Line
++++++<br+/>+Third+Line
++++</div>
++</div>
</form>|255338|SCSS：|255339|$input-padding:+4px;

@mixin+input-font()+{
++font-family:+'HelveticaNeue-Light',+'Helvetica+Neue+Light',+'Helvetica+Neue',+Helvetica,+Arial,+'Lucida+Grande',+sans-serif;
++font-size:+12px;
++font-weight:+300;
++line-height:+16px;
}

@mixin+placeholder-style()+{
++color:+#999;
++@include+input-font();
}

*+{
++-webkit-box-sizing:+border-box;
++-moz-box-sizing:+border-box;
++box-sizing:+border-box;
}

form+{
++width:+250px;
}

input,textarea+{
++display:+block;
++width:+100%25;
++padding:+$input-padding;
++border:+1px+solid+#ccc;
}

input+{
++margin-bottom:+10px;
++background-color:+#fff;

++@include+input-font();
}

textarea+{
++min-height:+80px;
++resize:+vertical;
++background-color:+transparent;
++&.data-edits+{
++++background-color:+#fff;
++}
}

.textarea-placeholder+{
++position:+relative;
++>+div+{
++++position:+absolute;
++++z-index:+-1;
++++top:+0;
++++left:+0;
++++width:+100%25;
++++height:+100%25;
++++padding:+$input-padding;
++++background-color:+#fff;
++++@include+placeholder-style();
++}
}

::-webkit-input-placeholder+{
++@include+placeholder-style();
}
:-moz-placeholder+{
++@include+placeholder-style();
}
::-moz-placeholder+{
++@include+placeholder-style();
}
:-ms-input-placeholder+{
++@include+placeholder-style();
}|255340|Javascript：|255341|$("textarea").on('change+keyup+paste',+function()+{
++var+length+=+$(this).val().length;
++if+(length+>+0)+{
++++$(this).addClass('data-edits');
++}+else+{
++++$(this).removeClass('data-edits');
++}
});|255342|entityMap|0|LINK|mutability|MUTABLE|url|1|https://jsfiddle.net/01taylop/L5b4omm8/|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/87969745298229efd95ed5237c184b5c.png|imageAlt^0|0|C|0|0|0|0|0|0|0|0|0|Z|0|0|0|0|7|D|0|0|D|D|0|0|0|2|8|1|0|0|0|0|6|A|H|E|1Q|G|2D|A|0|0|8|6|0|0|0|0|1|2|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|2J|8|@$9|2K|A|2L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|2M|8|@]|D|@]|E|$]]|$1|G|3|H|5|6|7|2N|8|@]|D|@]|E|$]]|$1|I|3|J|5|6|7|2O|8|@]|D|@]|E|$]]|$1|K|3|L|5|6|7|2P|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|2Q|8|@]|D|@]|E|$P|Q]]|$1|R|3|L|5|6|7|2R|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|2S|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|2T|8|@]|D|@$9|2U|A|2V|1|2W]]|E|$]]|$1|W|3|-4|5|6|7|2X|8|@]|D|@]|E|$]]|$1|X|3|Y|5|Z|7|2Y|8|@]|D|@]|E|$]]|$1|10|3|11|5|Z|7|2Z|8|@$9|30|A|31|B|12]]|D|@]|E|$]]|$1|13|3|-4|5|6|7|32|8|@]|D|@]|E|$]]|$1|14|3|15|5|6|7|33|8|@$9|34|A|35|B|C]]|D|@]|E|$]]|$1|16|3|-4|5|6|7|36|8|@]|D|@]|E|$]]|$1|17|3|18|5|6|7|37|8|@]|D|@]|E|$]]|$1|19|3|1A|5|6|7|38|8|@]|D|@$9|39|A|3A|1|3B]]|E|$]]|$1|1B|3|1C|5|6|7|3C|8|@]|D|@]|E|$]]|$1|1D|3|1E|5|Z|7|3D|8|@]|D|@]|E|$]]|$1|1F|3|1G|5|6|7|3E|8|@]|D|@]|E|$]]|$1|1H|3|1I|5|Z|7|3F|8|@$9|3G|A|3H|B|12]|$9|3I|A|3J|B|12]|$9|3K|A|3L|B|12]|$9|3M|A|3N|B|12]]|D|@]|E|$]]|$1|1J|3|1G|5|6|7|3O|8|@]|D|@]|E|$]]|$1|1K|3|1L|5|Z|7|3P|8|@$9|3Q|A|3R|B|12]]|D|@]|E|$]]|$1|1M|3|-4|5|6|7|3S|8|@]|D|@]|E|$]]|$1|1N|3|L|5|6|7|3T|8|@]|D|@]|E|$]]|$1|1O|3|1P|5|1Q|7|3U|8|@]|D|@$9|3V|A|3W|1|3X]]|E|$]]|$1|1R|3|L|5|6|7|3Y|8|@]|D|@]|E|$]]|$1|1S|3|1T|5|6|7|3Z|8|@]|D|@]|E|$]]|$1|1U|3|1V|5|O|7|40|8|@]|D|@]|E|$P|Q]]|$1|1W|3|1X|5|6|7|41|8|@]|D|@]|E|$]]|$1|1Y|3|1Z|5|O|7|42|8|@]|D|@]|E|$P|Q]]|$1|20|3|21|5|6|7|43|8|@]|D|@]|E|$]]|$1|22|3|23|5|O|7|44|8|@]|D|@]|E|$P|Q]]|$1|24|3|-4|5|6|7|45|8|@]|D|@]|E|$]]]|25|$26|$5|27|28|29|E|$2A|V]]|2B|$5|27|28|29|E|$2A|2C]]|2D|$5|2E|28|2F|E|$2G|2H|2I|-4]]]]

<p><strong>UPDATE (Jan 2016):</strong> The nice little hack might not work on all browsers anymore so I have a new solution with a tiny bit of javascript below.</p>
<hr />
<h1>A Nice Little Hack</h1>
<p>It doesn't feel nice, but you can just put the new lines in the html. Like this:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
1 Long St
London
Postcode
UK"&gt;&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>
<p>Notice each line is on a new line (not being wrapped) and each 'tab' indent is 4 spaces. Granted it is not a very nice method, but it seems to work:</p>
<p><a href="http://jsfiddle.net/01taylop/HDfju/" rel="noreferrer">http://jsfiddle.net/01taylop/HDfju/</a></p>
<ul>
<li>It is likely that the indent level of each line will vary depending on the width of your text area.</li>
<li>It is important to have <code>resize: none;</code> in the css so that the size of the textarea is fixed (See jsfiddle).</li>
</ul>
<p><strong>Alternatively</strong>
When you want a new line, hit return twice (So there is a empty line between your 'new lines'. This 'empty line' created needs to have enough tabs/spaces that would equate to the width of your textarea. It doesn't seem to matter if you have far too many, you just need enough. This is so dirty though and probably not browser compliant. I wish there was an easier way!</p>
<hr />
<h1>A Better Solution</h1>
<p>Check out the <a href="https://jsfiddle.net/01taylop/L5b4omm8/" rel="noreferrer">JSFiddle</a>.</p>
<ul>
<li>This solution positions a div behind the textarea.</li>
<li>Some javascript is used to change the background colour of the textarea, hiding or revealing the placeholder appropriately.</li>
<li>The inputs and placeholders must have the same font sizes, hence the two mixins.</li>
<li>The <code>box-sizing</code> and <code>display: block</code> properties on the textarea are important or the div behind it will not be the same size.</li>
<li>Setting <code>resize: vertical</code> and a <code>min-height</code> on the textarea are also important - notice how the placeholder text will wrap and expanding the textarea will keep the white background. However, commenting out the <code>resize</code> property will cause issues when expanding the textarea horizontally.</li>
<li>Just make sure the min-height on the textarea is enough to cover your entire placeholder at its smallest width.**</li>
</ul>
<p><a href="https://i.stack.imgur.com/2jTMm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2jTMm.png" alt="JSFiddle Screenshot" /></a></p>
<p>HTML:</p>
<pre><code>&lt;form&gt;
  &lt;input type='text' placeholder='First Name' /&gt;
  &lt;input type='text' placeholder='Last Name' /&gt;
  &lt;div class='textarea-placeholder'&gt;
    &lt;textarea&gt;&lt;/textarea&gt;
    &lt;div&gt;
      First Line
      &lt;br /&gt; Second Line
      &lt;br /&gt; Third Line
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;
</code></pre>
<p>SCSS:</p>
<pre><code>$input-padding: 4px;

@mixin input-font() {
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
}

@mixin placeholder-style() {
  color: #999;
  @include input-font();
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form {
  width: 250px;
}

input,textarea {
  display: block;
  width: 100%;
  padding: $input-padding;
  border: 1px solid #ccc;
}

input {
  margin-bottom: 10px;
  background-color: #fff;

  @include input-font();
}

textarea {
  min-height: 80px;
  resize: vertical;
  background-color: transparent;
  &amp;.data-edits {
    background-color: #fff;
  }
}

.textarea-placeholder {
  position: relative;
  &gt; div {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: $input-padding;
    background-color: #fff;
    @include placeholder-style();
  }
}

::-webkit-input-placeholder {
  @include placeholder-style();
}
:-moz-placeholder {
  @include placeholder-style();
}
::-moz-placeholder {
  @include placeholder-style();
}
:-ms-input-placeholder {
  @include placeholder-style();
}
</code></pre>
<p>Javascript:</p>
<pre><code>$(&quot;textarea&quot;).on('change keyup paste', function() {
  var length = $(this).val().length;
  if (length &gt; 0) {
    $(this).addClass('data-edits');
  } else {
    $(this).removeClass('data-edits');
  }
});
</code></pre>


blocks|key|253634|text|Jason+Gennaro答案的一个稍微改进的版本(请参阅代码注释)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|253635|var+placeholder+=+'This+is+a+line+\nthis+should+be+a+new+line';
$('textarea').attr('value',+placeholder);
$('textarea').focus(function(){
++++if($(this).val()+==+placeholder){
++++++++//+reset+the+value+only+if+it+equals+the+initial+one++++
++++++++$(this).attr('value',+'');
++++}
});
$('textarea').blur(function(){
++++if($(this).val()+==+''){
++++++++$(this).attr('value',+placeholder);
++++}++++
});
//+remove+the+focus,+if+it+is+on+by+default
$('textarea').blur();|code-block|syntax|javascript|253636|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>A slightly improved version of the Jason Gennaro's answer (see code comments):</p>

<pre><code>var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);
$('textarea').focus(function(){
    if($(this).val() == placeholder){
        // reset the value only if it equals the initial one    
        $(this).attr('value', '');
    }
});
$('textarea').blur(function(){
    if($(this).val() == ''){
        $(this).attr('value', placeholder);
    }    
});
// remove the focus, if it is on by default
$('textarea').blur();
</code></pre>


blocks|key|3154815|text|我喜欢Jason+Gennaro和Denis+Golomazov的工作，但我想要的是更具全球实用性的东西。我已经修改了这个概念，这样它就可以添加到任何页面上而不会有任何影响。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3154816|http://jsfiddle.net/pdXRx/297/|offset|length|3154817|<h1>Demo:+5+different+textarea+placeholder+behaviors+from+a+single+JS</h1>

<h2>Modified+behaviors</h2>



<textarea+placeholdernl>++++(click+me+to+demo)
Johnny+S.+Fiddle
248+Fake+St.
Atlanta,+GA+30134</textarea>

<textarea+placeholder='Address'+placeholdernl>++++(click+me+to+demo)
Johnny+S.+Fiddle
248+Fake+St.
Atlanta,+GA+30134</textarea>

<h2>Standard+behaviors</h2>

<textarea+placeholder='Address'>++++(delete+me+to+demo)
Johnny+S.+Fiddle
248+Fake+St.
Atlanta,+GA+30134</textarea>

<textarea>++++(delete+me+to+demo)
Johnny+S.+Fiddle
248+Fake+St.
Atlanta,+GA+30134</textarea>

<textarea+placeholder='Address'></textarea>|code-block|syntax|javascript|3154818|javascript非常简单。|3154819|<script>
(function($){
var+handleFocus+=+function(){
++++var+$this+=+$(this);
++++if($this.val()+===+$this.attr('placeholdernl')){
++++++++$this.attr('value',+'');
++++++++$this.css('color',+'');
++++}
};

var+handleBlur+=+function(){
++++var+$this+=+$(this);
++++if($this.val()+==+''){
++++++++$this.attr('value',+$this.attr('placeholdernl'))
++++++++$this.css('color',+'gray');
++++}++++
};

$('textarea[placeholdernl]').each(function(){
++++var+$this+=+$(this),
++++++++value+=+$this.attr('value'),
++++++++placeholder+=+$this.attr('placeholder');
++++$this.attr('placeholdernl',+value+?+value+:+placeholder);
++++$this.attr('value',+'');
++++$this.focus(handleFocus).blur(handleBlur).trigger('blur');
});
})(jQuery);
</script>|3154820|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|U|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|12|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|C]]]]

<p>I liked the work of Jason Gennaro and Denis Golomazov, but I wanted something that would be more globally useful. I have modified the concept so that it can be added to any page without repercussion.</p>

<p><a href="http://jsfiddle.net/pdXRx/297/" rel="nofollow">http://jsfiddle.net/pdXRx/297/</a></p>

<pre><code>&lt;h1&gt;Demo: 5 different textarea placeholder behaviors from a single JS&lt;/h1&gt;

&lt;h2&gt;Modified behaviors&lt;/h2&gt;

&lt;!-- To get simulated placeholder with New Lines behavior,
     add the placeholdernl attribute --&gt;

&lt;textarea placeholdernl&gt;    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134&lt;/textarea&gt;

&lt;textarea placeholder='Address' placeholdernl&gt;    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134&lt;/textarea&gt;

&lt;h2&gt;Standard behaviors&lt;/h2&gt;

&lt;textarea placeholder='Address'&gt;    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134&lt;/textarea&gt;

&lt;textarea&gt;    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134&lt;/textarea&gt;

&lt;textarea placeholder='Address'&gt;&lt;/textarea&gt;
</code></pre>

<p>The javascript is very simple</p>

<pre><code>&lt;script&gt;
(function($){
var handleFocus = function(){
    var $this = $(this);
    if($this.val() === $this.attr('placeholdernl')){
        $this.attr('value', '');
        $this.css('color', '');
    }
};

var handleBlur = function(){
    var $this = $(this);
    if($this.val() == ''){
        $this.attr('value', $this.attr('placeholdernl'))
        $this.css('color', 'gray');
    }    
};

$('textarea[placeholdernl]').each(function(){
    var $this = $(this),
        value = $this.attr('value'),
        placeholder = $this.attr('placeholder');
    $this.attr('placeholdernl', value ? value : placeholder);
    $this.attr('value', '');
    $this.focus(handleFocus).blur(handleBlur).trigger('blur');
});
})(jQuery);
&lt;/script&gt;
</code></pre>


blocks|key|258618|text|如何使用CSS解决方案：http://cssdeck.com/labs/07fwgrso|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|258619|::-webkit-input-placeholder::before+{
++content:+"FIRST\000ASECOND\000ATHIRD";
}

::-moz-placeholder::before+{
++content:+"FIRST\000ASECOND\000ATHIRD";
}

:-ms-input-placeholder::before+{
++content:+"FIRST\000ASECOND\000ATHIRD";
}|code-block|syntax|javascript|258620|entityMap|0|LINK|mutability|MUTABLE|url|http://cssdeck.com/labs/07fwgrso^0|C|W|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>How about a CSS solution: <a href="http://cssdeck.com/labs/07fwgrso" rel="noreferrer">http://cssdeck.com/labs/07fwgrso</a></p>

<pre><code>::-webkit-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

::-moz-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

:-ms-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}
</code></pre>


blocks|key|2940524|text|试试这个：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2940525|<textarea
placeholder="Line1&#x0a;&#x09;&#x09;&#x09;Line2"
cols="10"
rows="5"
style="resize:none">
</textarea>|code-block|syntax|javascript|2940526|http://jsfiddle.net/vr79B/|2940527|entityMap|0|LINK|mutability|MUTABLE|url^0|0|5|0|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|L]]]]

<p><strong>Try this:</strong></p>

<pre><code>&lt;textarea
placeholder="Line1&amp;#x0a;&amp;#x09;&amp;#x09;&amp;#x09;Line2"
cols="10"
rows="5"
style="resize:none"&gt;
&lt;/textarea&gt;
</code></pre>

<p><a href="http://jsfiddle.net/vr79B/" rel="noreferrer">http://jsfiddle.net/vr79B/</a></p>


blocks|key|3154871|text|我修改了@Richard+Bronosky的小提琴like+this。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3154872|使用data-*属性比使用自定义属性更好。我将<textarea+placeholdernl>替换为<textarea+data-placeholder>，还替换了一些其他样式。|style|CODE|3154873|编辑的|BOLD|3154874|这是Richard的original+answer，其中包含完整的代码片段。|3154875|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/pdXRx/396/|1|https://stackoverflow.com/a/20503849/1567523^0|P|9|0|0|2|6|N|O|1E|R|0|0|3|0|A|F|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@$A|11|B|12|F|G]|$A|13|B|14|F|G]|$A|15|B|16|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|17|8|@$A|18|B|19|F|J]]|9|@]|C|$]]|$1|K|3|L|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|M|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p>I modified @Richard Bronosky's fiddle <a href="http://jsfiddle.net/pdXRx/396/" rel="nofollow noreferrer">like this</a>.</p>

<p>It's better approach to use <code>data-*</code> attribute rather than a custom attribute.
I replaced <code>&lt;textarea placeholdernl&gt;</code> to <code>&lt;textarea data-placeholder&gt;</code> and some other styles as well.</p>

<p><strong>edited</strong><br>
Here is the Richard's <a href="https://stackoverflow.com/a/20503849/1567523">original answer</a> which contains full code snippet.</p>


blocks|key|253720|text|您可以在placeholder属性中插入一个新行html实体&#10;：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|253721|​|253722|<textarea+name="foo"+placeholder="hello+you&#10;Second+line&#10;Third+line"></textarea>|code-block|syntax|javascript|253723|253724|适用于:Chrome62、IE10、Firefox60|253725|无法在Safari+11上运行|253726|https://jsfiddle.net/lu1s/bxkjLpag/2/|253727|entityMap|0|LINK|mutability|MUTABLE|url^0|U|5|0|0|0|0|0|0|0|11|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|16|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|17|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|T|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|S]]]]

<p>You can insert a new line html entity <code>&amp;#10;</code> inside the placeholder attribute:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea name="foo" placeholder="hello you&amp;#10;Second line&amp;#10;Third line"&gt;&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>
<p>Works on:
Chrome 62, IE10, Firefox 60</p>
<p>Doesn't work on:
Safari 11</p>
<p><a href="https://jsfiddle.net/lu1s/bxkjLpag/2/" rel="noreferrer">https://jsfiddle.net/lu1s/bxkjLpag/2/</a></p>


blocks|key|3154957|text|非常简单|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3154958|++var+position+=+your+break+position;
++++var+breakLine+=+"&#13;&#10;";//in+html+
++++var+output+=+[value.slice(0,+position),+breakLine,+value.slice(position)].join('');
++++return+output;|code-block|syntax|javascript|3154959|值表示原始字符串|3154960|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>very simple </p>

<pre><code>  var position = your break position;
    var breakLine = "&amp;#13;&amp;#10;";//in html 
    var output = [value.slice(0, position), breakLine, value.slice(position)].join('');
    return output;
</code></pre>

<p>value represent the original string </p>


blocks|key|3154990|text|使用自定义占位符查看此解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3154991|3154992|可以在所有浏览器(包括Firefox)中使用的多行占位符|unordered-list-item|3154993|您可以根据需要自定义占位符|3154994|3154995|Demo+on+fiddle。|offset|length|3154996|​|3154997|$(document).on('input',+'#textArea',+function+()+{
	
++++++++if+($('#textArea').val())+{
++++++++++++$('#placeholderDiv').hide();
++++++++}+else+{
++++++++++++$('#placeholderDiv').show();
++++++++}+++
});|code-block|syntax|javascript|3154998|#textAreaWrap+{
++++position:+relative;
++++background-color:+white;
}

#textArea+{
++++position:+relative;
++++z-index:+1;
++++width:+350px;
++++height:+100px;
++++min-height:+100px;
++++padding:+6px+12px;
++++resize:+vertical;
++++background-color:+transparent;
++++/*+When+set+background-color:+transparent+-+Firefox++displays
++++unpleasant+textarea+border.+Set+border+style+to+fix+it.*/
++++border:+1px+solid+#a5a5a5;
}

#placeholderDiv+{
++++position:+absolute;
++++top:+0;
++++padding:+6px+13px;
++++color:+#a5a5a5;
}|3154999|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div+id="textAreaWrap">
++++
<textarea+id="textArea"></textarea>


<div+id="placeholderDiv">Multiline+textarea<br>
+++++++++++++++++++++++++placeholder<br>
+++++++++++++++++++++++++<br>
+++++++++++++++++++++++++that+works+in+Firefox</div>
++++
</div>|3155000|3155001|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/tropic/74na7vkh/^0|0|0|0|0|0|0|E|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|18|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|19|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1B|8|@]|9|@$K|1C|L|1D|1|1E]]|A|$]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1G|8|@]|9|@]|A|$R|S]]|$1|T|3|U|5|Q|7|1H|8|@]|9|@]|A|$R|S]]|$1|V|3|W|5|Q|7|1I|8|@]|9|@]|A|$R|S]]|$1|X|3|N|5|6|7|1J|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

<p>Check out this solution with custom placeholder.</p>

<ul>
<li>You get multiline placeholder that works in all browsers (including Firefox)</li>
<li>It is posible to customise placeholder as you want</li>
</ul>

<p><a href="http://jsfiddle.net/tropic/74na7vkh/" rel="nofollow">Demo on fiddle</a>.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on('input', '#textArea', function () {
	
        if ($('#textArea').val()) {
            $('#placeholderDiv').hide();
        } else {
            $('#placeholderDiv').show();
        }   
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#textAreaWrap {
    position: relative;
    background-color: white;
}

#textArea {
    position: relative;
    z-index: 1;
    width: 350px;
    height: 100px;
    min-height: 100px;
    padding: 6px 12px;
    resize: vertical;
    background-color: transparent;
    /* When set background-color: transparent - Firefox  displays
    unpleasant textarea border. Set border style to fix it.*/
    border: 1px solid #a5a5a5;
}

#placeholderDiv {
    position: absolute;
    top: 0;
    padding: 6px 13px;
    color: #a5a5a5;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div id="textAreaWrap"&gt;
    
&lt;textarea id="textArea"&gt;&lt;/textarea&gt;

&lt;!-- Check here. If textarea has content -
     set for this div attribute style="display: none;" --&gt;
&lt;div id="placeholderDiv"&gt;Multiline textarea&lt;br&gt;
                         placeholder&lt;br&gt;
                         &lt;br&gt;
                         that works in Firefox&lt;/div&gt;
    
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2940711|text|Salaamun+Alekum|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2940712|&#10;|code-block|syntax|javascript|2940713|适用于Google+Chrome|2940714|​|2940715|📷|atomic|offset|length|2940716|2940717|<textarea+placeholder="Enter+Choice#1+&#10;Enter+Choice#2+&#10;Enter+Choice#3"></textarea>|2940718|2940719|我在Windows10.0+(Build+10240)和Google+Chrome47.0.2526.80m上测试了这个|blockquote|2940720|2940721|2015年12月17日，星期四，08:43:08+AST+6+Rabi+Al-Awwal|2940722|2940723|谢谢|2940724|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/13a45ac2c1e5aa1911ceb486c06871e7.png|imageAlt^0|0|0|0|0|0|1|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1D|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1E|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|1F|8|@]|9|@$N|1G|O|1H|1|1I]]|A|$]]|$1|P|3|J|5|6|7|1J|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1K|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|T|3|U|5|V|7|1M|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1O|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19|1A|-4]]]]

<p>Salaamun Alekum</p>
<pre><code>&amp;#10;
</code></pre>
<p>Works For Google Chrome</p>
<p><a href="https://i.stack.imgur.com/mrno9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mrno9.png" alt="enter image description here" /></a></p>
<pre><code>&lt;textarea placeholder=&quot;Enter Choice#1 &amp;#10;Enter Choice#2 &amp;#10;Enter Choice#3&quot;&gt;&lt;/textarea&gt;
</code></pre>
<blockquote>
<p>I Tested This On Windows 10.0 (Build 10240) And Google Chrome Version
47.0.2526.80 m</p>
<p>08:43:08 AST 6 Rabi Al-Awwal, 1437 Thursday, 17 December 2015</p>
</blockquote>
<p>Thank You</p>


blocks|key|257731|text|我不喜欢在你聚焦文本区域时隐藏占位符。所以我做了一个构造函数Placeholder，它看起来和内置的占位符一模一样，也可以在Google+Chrome以外的其他浏览器中使用。这非常方便，因为您可以随心所欲地使用Placeholder函数，它甚至不需要jQuery。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|257732|编辑：|BOLD|257733|它现在还可以正确地处理特殊情况，比如插入占位符。|257734|​|257735|var+textarea+=+document.getElementById("textarea");
new+Placeholder(textarea,+"Line+1\nLine+2\nLine+3");

function+Placeholder(el,+placeholder)+{
++++if+(el.value+==+""+%7C%7C+el.value+==+placeholder)+{
++++++++el.style.color+=+"gray";
++++++++el.value+=+placeholder;
++++++++el._plc+=+true;
++++++++el.className+%2B=+"+unselectable";
++++}
++++function+keyPress(e)+{
++++++++window.setTimeout(function()+{
++++++++++++var+replaced+=+reverseStr(el.value).replace(reverseStr(placeholder),+"");
++++++++++++
++++++++++++if+(el.value+==+"")+{
++++++++++++++++el.value+=+placeholder;
++++++++++++++++el.style.color+=+"gray";
++++++++++++++++cursorToStart(el);
++++++++++++++++el._plc+=+true;
++++++++++++++++el.className+%2B=+"+unselectable";
++++++++++++}+else+if+(el._plc+&&+el.value.endsWith(placeholder)+&&+replaced+!==+"")+{
++++++++++++++++el.value+=+reverseStr(replaced);
++++++++++++++++el.style.color+=+"black";
++++++++++++++++el._plc+=+false;
++++++++++++++++el.readOnly+=+false;
++++++++++++++++el.className+=+el.className.replace("unselectable",+"");
++++++++++++}+else+if+(el._plc+&&+el.readOnly)+{
++++++++++++++++var+ch+=+String.fromCharCode(e.charCode);
++++++++++++++++if+(e.keyCode+==+13)+ch+=+"\n";+++++//+ENTER
++++++++++++++++else+if+(e.charCode+==+0)+return;+++//+non-character+keys
++++++++++++++++
++++++++++++++++el.value+=+ch;
++++++++++++++++el.style.color+=+"black";
++++++++++++++++el._plc+=+false;
++++++++++++++++el.readOnly+=+false;
++++++++++++++++el.className+=+el.className.replace("unselectable",+"");
++++++++++++}
++++++++},+10);
++++}
++++el.addEventListener("keypress",+keyPress,+false);
++++el.addEventListener("paste",+keyPress,+false);
++++el.addEventListener("cut",+keyPress,+false);
++++el.addEventListener("mousedown",+function()+{
++++++++if+(el._plc)+el.readOnly+=+true;
++++},+false);
++++el.addEventListener("mouseup",+function()+{
++++++++el.readOnly+=+false;
++++++++if+(el._plc)+cursorToStart(el);
++++},+false);
++
++++function+cursorToStart(input)+{
++++++++if+(input.createTextRange)+{
++++++++++++var+part+=+input.createTextRange();
++++++++++++part.move("character",+0);
++++++++++++part.select();
++++++++}+else+if+(input.setSelectionRange){
++++++++++++input.setSelectionRange(0,+0);
++++++++}+input.focus();
++++}
++++function+reverseStr(str)+{
++++++++if+(!str)+return+"";
++++++++return+str.split("").reverse().join("");
++++}
}|code-block|syntax|javascript|257736|textarea+{
++++border:+1px+solid+gray;
++++padding:+3px+6px;
++++font-family:+Arial;
++++font-size:+13px;
++++transition:+.2s;
}
textarea:hover,+textarea:focus+{
++++border-color:+#2277cc;
}
textarea:focus+{
++++box-shadow:+inset+0+0+5px+#85B7E9;
}
*.unselectable+{
++++-webkit-user-select:+none;
++++-webkit-touch-callout:+none;
++++-khtml-user-select:+none;
++++-moz-user-select:+none;
++++-ms-user-select:+none;
++++-o-user-select:+none;
}|257737|<textarea+id="textarea"></textarea>|257738|257739|entityMap^0|U|B|2X|B|0|0|3|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@$9|14|A|15|B|H]]|D|@]|E|$]]|$1|I|3|J|5|6|7|16|8|@]|D|@]|E|$]]|$1|K|3|L|5|6|7|17|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|18|8|@]|D|@]|E|$P|Q]]|$1|R|3|S|5|O|7|19|8|@]|D|@]|E|$P|Q]]|$1|T|3|U|5|O|7|1A|8|@]|D|@]|E|$P|Q]]|$1|V|3|L|5|6|7|1B|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|X|$]]

<p>I don't like hiding the placeholder when you focus the textarea. So I made a constructor function <code>Placeholder</code> that looks exactly like the built-in placeholder and works also in other browsers than Google Chrome. It's very convenient because you can use the <code>Placeholder</code> function as often as you want and it doesn't even need jQuery.</p>

<p><strong>EDIT:</strong></p>

<p>It now also handles special cases, like inserting the placeholder, correctly.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var textarea = document.getElementById("textarea");
new Placeholder(textarea, "Line 1\nLine 2\nLine 3");

function Placeholder(el, placeholder) {
    if (el.value == "" || el.value == placeholder) {
        el.style.color = "gray";
        el.value = placeholder;
        el._plc = true;
        el.className += " unselectable";
    }
    function keyPress(e) {
        window.setTimeout(function() {
            var replaced = reverseStr(el.value).replace(reverseStr(placeholder), "");
            
            if (el.value == "") {
                el.value = placeholder;
                el.style.color = "gray";
                cursorToStart(el);
                el._plc = true;
                el.className += " unselectable";
            } else if (el._plc &amp;&amp; el.value.endsWith(placeholder) &amp;&amp; replaced !== "") {
                el.value = reverseStr(replaced);
                el.style.color = "black";
                el._plc = false;
                el.readOnly = false;
                el.className = el.className.replace("unselectable", "");
            } else if (el._plc &amp;&amp; el.readOnly) {
                var ch = String.fromCharCode(e.charCode);
                if (e.keyCode == 13) ch = "\n";     // ENTER
                else if (e.charCode == 0) return;   // non-character keys
                
                el.value = ch;
                el.style.color = "black";
                el._plc = false;
                el.readOnly = false;
                el.className = el.className.replace("unselectable", "");
            }
        }, 10);
    }
    el.addEventListener("keypress", keyPress, false);
    el.addEventListener("paste", keyPress, false);
    el.addEventListener("cut", keyPress, false);
    el.addEventListener("mousedown", function() {
        if (el._plc) el.readOnly = true;
    }, false);
    el.addEventListener("mouseup", function() {
        el.readOnly = false;
        if (el._plc) cursorToStart(el);
    }, false);
  
    function cursorToStart(input) {
        if (input.createTextRange) {
            var part = input.createTextRange();
            part.move("character", 0);
            part.select();
        } else if (input.setSelectionRange){
            input.setSelectionRange(0, 0);
        } input.focus();
    }
    function reverseStr(str) {
        if (!str) return "";
        return str.split("").reverse().join("");
    }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>textarea {
    border: 1px solid gray;
    padding: 3px 6px;
    font-family: Arial;
    font-size: 13px;
    transition: .2s;
}
textarea:hover, textarea:focus {
    border-color: #2277cc;
}
textarea:focus {
    box-shadow: inset 0 0 5px #85B7E9;
}
*.unselectable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea id="textarea"&gt;&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3155078|text|HTML|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3155079|<textarea+data-placeholder="1111\n2222"></textarea>|code-block|syntax|javascript|3155080|JS|3155081|$('textarea[data-placeholder]').each(function(){
++++var+$this+=+$(this),
++++++++placeholder+=+$this.data('placeholder'),
++++++++placeholderSplit+=+placeholder.split('\\n');
++++placeholder+=+placeholderSplit.join('\n');
++++$this.focus(function(){
++++++++var+$this+=+$(this);
++++++++if($this.val()+===+placeholder){
++++++++++++$this.val('');
++++++++++++//+$this.removeClass('placeholder');
++++++++}
++++}).blur(function(){
++++++++var+$this+=+$(this);
++++++++if($this.val()+==+'')+{
++++++++++++$this.val(placeholder);
++++++++++++//+$this.addClass('placeholder');
++++++++}
++++}).trigger('blur');
});|3155082|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<h2>HTML</h2>

<pre><code>&lt;textarea data-placeholder="1111\n2222"&gt;&lt;/textarea&gt;
</code></pre>

<h2>JS</h2>

<pre><code>$('textarea[data-placeholder]').each(function(){
    var $this = $(this),
        placeholder = $this.data('placeholder'),
        placeholderSplit = placeholder.split('\\n');
    placeholder = placeholderSplit.join('\n');
    $this.focus(function(){
        var $this = $(this);
        if($this.val() === placeholder){
            $this.val('');
            // $this.removeClass('placeholder');
        }
    }).blur(function(){
        var $this = $(this);
        if($this.val() == '') {
            $this.val(placeholder);
            // $this.addClass('placeholder');
        }
    }).trigger('blur');
});
</code></pre>


blocks|key|3155101|text|使用&#10;代替\n，这将更改该行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3155102|entityMap^0|2|5|9|2|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>Use <code>&amp;#10;</code> in place of <code>\n</code> this will change the line.</p>


blocks|key|258804|text|Textarea使用占位符的空格属性。https://www.w3schools.com/cssref/pr_text_white-space.asp|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|258805|将它设置为pre-line为我解决了问题。|258806|​|258807|textarea+{
++white-space:+pre-line;
}|code-block|syntax|javascript|258808|<textarea+placeholder='This+is+a+line+++++
should+this+be+a+new+line'></textarea>|258809|258810|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/cssref/pr_text_white-space.asp^0|J|1K|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|J|7|14|8|@]|9|@]|C|$K|L]]|$1|O|3|G|5|6|7|15|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

<p>Textarea respects the white-space attribute for the placeholder. <a href="https://www.w3schools.com/cssref/pr_text_white-space.asp" rel="nofollow noreferrer">https://www.w3schools.com/cssref/pr_text_white-space.asp</a></p>

<p>Setting it to pre-line solved the problem for me.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>textarea {
  white-space: pre-line;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea placeholder='This is a line     
should this be a new line'&gt;&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2940824|text|仅添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2940825|对于换行，不需要编写任何CSS或javascript。|2940826|​|2940827|textarea{
++++width:300px;
++++height:100px;

}|code-block|syntax|javascript|2940828|<textarea+placeholder='This+is+a+line+this+&#10should+be+a+new+line'></textarea>

<textarea+placeholder='+This+is+a+line+

should+this+be+a+new+line?'></textarea>|2940829|2940830|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Add only &amp;#10 for breaking line, no need to write any CSS or javascript. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>textarea{
    width:300px;
    height:100px;

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea placeholder='This is a line this &amp;#10should be a new line'&gt;&lt;/textarea&gt;

&lt;textarea placeholder=' This is a line 

should this be a new line?'&gt;&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3155213|text|这个问题可以通过使用占位符显示的选择器和叠加背景来解决，如果您的实现允许：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3155214|textarea:not(:placeholder-shown)+{
++background:+#fff;
}

div+{
++top:+0;
++left:+14px;
++color:+rgba(0,0,0,0.4);
++z-index:+-1;
++position:+absolute;
++line-height:+1.2;
++white-space:+pre-wrap;
}|code-block|syntax|javascript|3155215|https://codepen.io/franciscoaquino/pen/YzyBPYK|offset|length|3155216|选择器支持：|3155217|https://caniuse.com/#feat=css-placeholder-shown|3155218|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|1A|0|0|0|0|1B|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$I|14|J|15|1|16]]|A|$]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|H]]|V|$5|R|S|T|A|$U|N]]]]

<p>This issue can be tackled by using the placeholder-shown selector and super imposed backgrounds, if your implementation allows:</p>

<pre><code>textarea:not(:placeholder-shown) {
  background: #fff;
}

div {
  top: 0;
  left: 14px;
  color: rgba(0,0,0,0.4);
  z-index: -1;
  position: absolute;
  line-height: 1.2;
  white-space: pre-wrap;
}
</code></pre>

<p><a href="https://codepen.io/franciscoaquino/pen/YzyBPYK" rel="nofollow noreferrer">https://codepen.io/franciscoaquino/pen/YzyBPYK</a></p>

<p>Selector support:</p>

<p><a href="https://caniuse.com/#feat=css-placeholder-shown" rel="nofollow noreferrer">https://caniuse.com/#feat=css-placeholder-shown</a></p>


blocks|key|257815|text|根据我看到的三个不同技巧的组合，这似乎在我测试过的所有浏览器中都有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|257816|HTML：|257817|<textarea+placeholder="Line+One&#10;Line+Two&#10;&#10;Line+Four"></textarea>|code-block|syntax|javascript|257818|HTML文件底部的JS：|257819|<script>
++++
++++var+textAreas+=+document.getElementsByTagName('textarea');

++++Array.prototype.forEach.call(textAreas,+function(elem)+{
++++++++elem.placeholder+=+elem.placeholder.replace(/\u000A/g,+
++++++++'+++++++++++++++++++++++++++++++++++++++++++++++++++++\
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++\
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++\
++++++++\n\u2063');
++++});

</script>|257820|注意，额外的空格将导致干净的环绕，但必须有足够的空间来填充文本区的宽度，我放置的足够的空间足以满足我的项目，但您可以通过观察textarea.width并计算适当的基数来生成它们。|257821|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Based on a combination of three different tricks I saw this seems to work in all browsers I've tested it in.</p>
<p>HTML:</p>
<pre><code>&lt;textarea placeholder=&quot;Line One&amp;#10;Line Two&amp;#10;&amp;#10;Line Four&quot;&gt;&lt;/textarea&gt;
</code></pre>
<p>JS At bottom of HTML file:</p>
<pre><code>&lt;script&gt;
    
    var textAreas = document.getElementsByTagName('textarea');

    Array.prototype.forEach.call(textAreas, function(elem) {
        elem.placeholder = elem.placeholder.replace(/\u000A/g, 
        '                                                     \
                                                              \
                                                              \
        \n\u2063');
    });

&lt;/script&gt;
</code></pre>
<p>Note, the extra spaces will cause a clean wrap around but there has to be enough spaces that it will fill the width of the textarea, I placed enough that it's sufficient for my projects but you could be robust and generate them by observing the textarea.width and calculating the proper cardinality.</p>


blocks|key|2940934|text|如果在ASP.NET项目中使用Razor，可以执行以下操作，这对非常长的占位符很有帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2940935|@{+
++++string+strPlaceholder+=+"Shipment+Id+to+Update,+Container+Id+to+Update,+New+Tracking+Number+\r\n"
++++++++%2B+"Shipment+Id+to+Update,+Container+Id+to+Update,+New+Tracking+Number+\r\n"
++++++++%2B+"Shipment+Id+to+Update,+Container+Id+to+Update,+New+Tracking+Number+\r\n"
++++++++%2B+"\r\n"
++++++++%2B+"i.e.+to+update+all+containers+with+shipment+Id+5803407,+etner+like+this:+\r\n"
++++++++%2B+"5803407,+,+1Z20579A0322337062+\r\n"
++++++++%2B+"\r\n"
++++++++%2B+"or+to+update+a+specific+container+Id,+enter+like+this:+\r\n"
++++++++%2B+"5803407,+112546247,+1Z20579A0322337062+\r\n"
++++++++;
}
<textarea+type="text"+class="form-control"+style="height:650px;"+id="ShipmentList"+name="ShipmentList"+
++++++++++++placeholder="@strPlaceholder"+required></textarea>|code-block|syntax|javascript|2940936|​|2940937|📷|atomic|offset|length|2940938|2940939|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/add58afe679436c055a9897d8d046e2c.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

<p>If you're using Razor in an ASP.NET project, you can do the below, which is helpful for very long placeholder values:</p>
<pre><code>@{ 
    string strPlaceholder = &quot;Shipment Id to Update, Container Id to Update, New Tracking Number \r\n&quot;
        + &quot;Shipment Id to Update, Container Id to Update, New Tracking Number \r\n&quot;
        + &quot;Shipment Id to Update, Container Id to Update, New Tracking Number \r\n&quot;
        + &quot;\r\n&quot;
        + &quot;i.e. to update all containers with shipment Id 5803407, etner like this: \r\n&quot;
        + &quot;5803407, , 1Z20579A0322337062 \r\n&quot;
        + &quot;\r\n&quot;
        + &quot;or to update a specific container Id, enter like this: \r\n&quot;
        + &quot;5803407, 112546247, 1Z20579A0322337062 \r\n&quot;
        ;
}
&lt;textarea type=&quot;text&quot; class=&quot;form-control&quot; style=&quot;height:650px;&quot; id=&quot;ShipmentList&quot; name=&quot;ShipmentList&quot; 
            placeholder=&quot;@strPlaceholder&quot; required&gt;&lt;/textarea&gt;
</code></pre>
<p><a href="https://i.stack.imgur.com/aiOjD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aiOjD.png" alt="enter image description here" /></a></p>


blocks|key|258871|text|我来这里是为了一个多行占位符解决方案，然后我意识到当textarea在一个formik表单中时，被接受的解决方案是不起作用的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|258872|在这种情况下，解决方案是模板文字。它允许您指定多行文本字符串。|258873|++++<textarea
++++++++cols={40}
++++++++placeholder={`day+1:+Temple+visit,&#13;&#10;
++++++++day+2:+Jungle+barbeque,\n
++++++++day+3:+Waterfall+visit+in+the+evening,\n
++++++++day+4:+Visit+UNESCO+World+Heritage+Site,\n
++++++++day+5:+Art+gallery+show,\n
++++++++day+6:+Visit+grand+swimming+pool,\n
++++++++day+7:+Visit+to+Blue+fort`}
++++++++rows={20}
/>|code-block|syntax|javascript|258874|source|offset|length|258875|entityMap|0|LINK|mutability|MUTABLE|url|https://pretagteam.com/question/formik-componenttextarea-multiline-in-placeholder^0|0|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>I came here for a multiline placeholder solution, then I realised the accepted solution doesn't work when textarea is inside a formik form.</p>
<p>And the solution, in this case, is template literals. It allows you to specify a multi-line string of text.</p>
<pre><code>    &lt;textarea
        cols={40}
        placeholder={`day 1: Temple visit,&amp;#13;&amp;#10;
        day 2: Jungle barbeque,\n
        day 3: Waterfall visit in the evening,\n
        day 4: Visit UNESCO World Heritage Site,\n
        day 5: Art gallery show,\n
        day 6: Visit grand swimming pool,\n
        day 7: Visit to Blue fort`}
        rows={20}
/&gt;
</code></pre>
<p><a href="https://pretagteam.com/question/formik-componenttextarea-multiline-in-placeholder" rel="nofollow noreferrer">source</a></p>


<p>I have tried a few approaches but none worked. Does anyone know a the nifty trick to get around this?</p>

<pre><code>&lt;textarea placeholder='This is a line \n this should be a new line'&gt;&lt;/textarea&gt;

&lt;textarea placeholder='This is a line     
should this be a new line?'&gt;&lt;/textarea&gt; &lt;!-- this works in chrome apparently --&gt;
</code></pre>

<p>UPDATE: It doesn't work in chrome. It was just the textarea width. </p>

<p><strong>See:</strong> <a href="http://jsfiddle.net/pdXRx/">http://jsfiddle.net/pdXRx/</a></p>


Insert line break inside placeholder attribute of a textarea?

我已经尝试了几种方法，但都没有奏效。有没有人知道解决这个问题的妙招？<textarea placeholder='This is a line \n this should be a new line'></textarea><textarea placeholder='This is a line     shoul...

问是否在文本区域的占位符属性内插入换行符？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否在文本区域的占位符属性内插入换行符？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否在文本区域的占位符属性内插入换行符？
EN