我在文本框中使用了HTML5的占位符属性来显示幽灵文本，当你聚焦在这些文本框上时，幽灵文本会消失:
<input type="text" name="email" placeholder="Enter email"/>
我想使用同样的机制在文本域中实现多行占位符文本，可能像这样：
<textarea name="story" placeholder="Enter story\n next line\n more"></textarea>
但是这些 \n 出现在文本中并不会导致换行... 有没有一种方法可以拥有多行占位符？
更新: 我唯一让它工作的方法是利用jQuery Watermark插件，它可以接受占位符文本中的HTML：
$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});
在大多数（具体详情请见下文）浏览器中，使用JavaScript编辑占位符允许多行占位符。
正如所说的那样，这与规范不兼容，您不应该期望它在未来可以使用（编辑：它确实可以使用）。
This example replaces all multiline textarea's placeholder.
var textAreas = document.getElementsByTagName('textarea');
Array.prototype.forEach.call(textAreas, function(elem) {
elem.placeholder = elem.placeholder.replace(/\\n/g, '\n');
});<textarea class="textAreaMultiline"
placeholder="Hello, \nThis is multiline example \n\nHave Fun"
rows="5" cols="35"></textarea>JsFiddle代码片段。
根据评论，有些浏览器接受这个hack，而其他浏览器则不接受。
这是我运行的测试结果（使用browsertshots和browserstack）
结合这些统计数据，意味着它可以在目前使用的88.7%的浏览器上工作，（截至2015年10月）。
更新：今天，它可以在目前使用的94.4%的浏览器上工作。（截至2018年7月）
multiline而不是multiligne。 - Daniel LoureiroWKWebView。因此，在WKWebView之前，IOS上的任何浏览器都无法正确呈现此黑客。 - Cyrbil我发现如果您使用了很多空格，浏览器会正确地换行。不用担心使用准确数量的空格，只需添加大量空格即可，浏览器应该会正确地换行到下一行的第一个非空格字符。
<textarea name="address" placeholder="1313 Mockingbird Ln Saginaw, MI 45100"></textarea>
实际上有一个技巧可以在Webkit浏览器中添加多行占位符，Chrome过去可以使用，但在更近的版本中已将其删除：
首先像往常一样将占位符的第一行添加到HTML5中。
<textarea id="text1" placeholder="Line 1" rows="10"></textarea>
然后通过CSS添加该行的其余部分：
#text1::-webkit-input-placeholder::after {
display:block;
content:"Line 2\A Line 3";
}
<textarea id="text2" placeholder="." rows="10"></textarea>
然后通过CSS添加该行的其余部分：
#text2::-webkit-input-placeholder{
color:transparent;
}
#text2::-webkit-input-placeholder::before {
color:#666;
content:"Line 1\A Line 2\A Line 3\A";
}
如果有人能在Firefox上让类似的演示工作起来，那将非常好。
根据MDN的说法，
在占位文本中输入回车或换行符时，在呈现提示时必须将其视为换行符。
这意味着如果你只是跳到新一行，它应该会被正确呈现。即：
<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>
应该呈现为这样：
React:
如果您正在使用React，可以按照以下方式操作：
placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}
<textarea rows="6" cols="45" placeholder="{{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea>
这似乎可以通过正常输入来完成，
<textarea name="" id="" placeholder="Hello awesome world. I will break line now
Yup! Line break seems to work."></textarea>我猜段落对w3来说还不够简洁 ;)
使用Vue.js：
<textarea name="story" :placeholder="'Enter story\n next line\n more'"></textarea>
placeholder="\/robots.txt \r\n /google-analytics-auth.html`"` - Kingsley
white-space属性以确保它被正确设置，例如pre-wrap。 - Cory Mawhorter 在 Safari 以外的所有地方都有效。 - Sphinxxx