Html <textarea> 中可以有多行 HTML5 占位符文本吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7189223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you have multiline HTML5 placeholder text in a <textarea>?
提问by at.
I have ghost text in textfields that disappear when you focus on them using HTML5's placeholder attribute:
当您使用 HTML5 的占位符属性关注它们时，我在文本字段中有幻影文本会消失：
<input type="text" name="email" placeholder="Enter email"/>
I want to use that same mechanism to have multiline placeholder text in a textarea, maybe something like this:
我想使用相同的机制在 textarea 中包含多行占位符文本，可能是这样的：
<textarea name="story" placeholder="Enter story\n next line\n more"></textarea>
But those \ns show up in the text and don't cause newlines... Is there a way to have a multiline placeholder?
但是那些\ns 出现在文本中并且不会导致换行......有没有办法拥有多行占位符？
UPDATE: The only way I got this to work was utilizing the jQuery Watermark plugin, which accepts HTML in the placeholder text:
更新：我让它工作的唯一方法是使用jQuery Watermark 插件，它接受占位符文本中的 HTML：
$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});
采纳答案by Ionu? G. Stan
For <textarea>s the specspecifically outlines that carriage returns + line breaks in the placeholder attribute MUST be rendered as linebreaks by the browser.
对于<textarea>s ，规范特别概述了占位符属性中的回车 + 换行符必须由浏览器呈现为换行符。
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.
当元素的值是空字符串并且控件没有获得焦点时（例如，通过将它显示在一个空白的未聚焦控件中），用户代理应该向用户呈现这个提示。提示中的所有 U+000D CARRIAGE RETURN U+000A LINE FEED 字符对 (CRLF)，以及提示中的所有其他 U+000D CARRIAGE RETURN (CR) 和 U+000A LINE FEED (LF) 字符，都必须处理作为呈现提示时的换行符。
Also reflected on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder
也反映在 MDN 上：https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder
FWIW, when I try on Chrome 63.0.3239.132, it does indeed work as it says it should.
FWIW，当我尝试使用 Chrome 63.0.3239.132 时，它确实像它所说的那样工作。
回答by Cyrbil
On most(see detail below) browsers, editing the placeholder in javascript do allows multiline placeholder. As it has been said, it's not compliant with the specificationand you shouldn't expect it to work in the future (edit: it does work).
在大多数（见下文）浏览器上，在 javascript 中编辑占位符确实允许多行占位符。如前所述，它不符合规范，你不应该期望它在未来工作（编辑：它确实工作）。
This example replace allmultiline textarea's placeholder.
此示例替换所有多行 textarea 的占位符。
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>JsFiddlesnippet.
JsFiddle片段。
预期结果
Based on comments it seems some browser accepts this hack and others don't.
This is the result of tests I ran (with browsertshotsand browserstack)
根据评论，似乎有些浏览器接受了这种黑客攻击，而另一些则不接受。
这是我运行的测试结果（使用browsertshots和browserstack）
- Chrome: >= 35.0.1916.69
- Firefox: >= 35.0 (results varies on platform)
- IE: >= 10
- KHTML based browsers: 4.8
- Safari: No (tested = Safari 8.0.6 Mac OS X 10.8)
- Opera: No (tested <= 15.0.1147.72)
- 铬：> = 35.0.1916.69
- Firefox：>= 35.0（结果因平台而异）
- IE: >= 10
- 基于 KHTML 的浏览器：4.8
- Safari：否（已测试 = Safari 8.0.6 Mac OS X 10.8）
- 歌剧：否（测试 <= 15.0.1147.72）
Base on statistics, this means that it works on about 88.7%of currently (Oct 2015)used browsers.
根据统计，这意味着它适用于目前（2015 年 10 月）使用的浏览器的88.7%。
Update: Today, it works on at least 94.4%of currently (July 2018)used browsers.
更新：今天，它适用于至少94.4%的当前（2018 年 7 月）使用的浏览器。
回答by Thomas Hunter II
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.
我发现如果您使用大量空格，浏览器会正确包装它。不要担心使用确切数量的空格，只需在那里扔很多，浏览器应该正确换行到下一行的第一个非空格字符。
<textarea name="address" placeholder="1313 Mockingbird Ln Saginaw, MI 45100"></textarea>
回答by Gottox
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:
实际上有一个 hack 可以在 Webkit 浏览器中添加多行占位符，Chrome 曾经可以工作，但在最近的版本中他们删除了它：
First add the first line of your placeholder to the html5 as usual
首先像往常一样将占位符的第一行添加到 html5
<textarea id="text1" placeholder="Line 1" rows="10"></textarea>
then add the rest of the line by css:
然后通过 css 添加该行的其余部分：
#text1::-webkit-input-placeholder::after {
display:block;
content:"Line 2\A Line 3";
}
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:
如果您想将线路保留在一处，您可以尝试以下操作。这样做的缺点是除了 chrome、safari、webkit 等其他浏览器。甚至不显示第一行：
<textarea id="text2" placeholder="." rows="10"></textarea>?
then add the rest of the line by css:
然后通过 css 添加该行的其余部分：
#text2::-webkit-input-placeholder{
color:transparent;
}
#text2::-webkit-input-placeholder::before {
color:#666;
content:"Line 1\A Line 2\A Line 3\A";
}
It would be very great, if s.o. could get a similar demo working on Firefox.
如果可以在 Firefox 上获得类似的演示，那就太好了。
回答by ross_troha
If you're using AngularJS, you can simply use braces to place whatever you'd like in it: Here's a fiddle.
如果您使用的是 AngularJS，您可以简单地使用大括号来放置您想要的任何内容：这是一个小提琴。
<textarea rows="6" cols="45" placeholder="{{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea>
回答by LaundroMat
Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.
在呈现提示时，占位符文本中的回车符或换行符必须被视为换行符。
This means that if you just jump to a new line, it should be rendered correctly. I.e.
这意味着如果你只是跳到一个新行，它应该被正确渲染。IE
<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>
should render like this:
应该像这样呈现：
回答by Silent Penguin
The html5 specexpressly rejects new lines in the place holder field. Versions of Webkit /will/insert new lines when presented with line feeds in the placeholder, however this is incorrect behaviour and should not be relied upon.
在HTML5规范明确表示拒绝在占位领域的新线。当在占位符中显示换行符时，Webkit 的版本/will/插入新行，但这是不正确的行为，不应依赖。
I guess paragraphs aren't brief enough for w3 ;)
我想段落对于 w3 来说不够简短；)
回答by firetiger77
React:
反应：
If you are using React, you can do it as follows:
如果您使用的是 React，则可以按如下方式进行：
placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}
回答by Krzysiek
If your textareahave 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 line length > cols/2.
如果您textarea有静态宽度，您可以使用不间断空格和自动 textarea 包装的组合。只需将每一行的空格替换为 nbsp ，并确保两条相邻的线不能合二为一。在实践中line length > cols/2。
This isn't the best way, but could be the only cross-browser solution.
这不是最好的方法，但可能是唯一的跨浏览器解决方案。
<textarea class="textAreaMultiligne"
placeholder="Hello, This is multiligne example Have Fun "
rows="5" cols="35"></textarea>回答by Jeffrey Neo
You can try using CSS, it works for me. The attribute placeholder=" "is required here.
您可以尝试使用 CSS，它对我有用。placeholder=" "此处需要该属性。
<textarea id="myID" placeholder=" "></textarea>
<style>
#myID::-webkit-input-placeholder::before {
content: "1st line...\A2nd line...\A3rd line...";
}
</style>
