您可以在<textarea>中使用多行HTML5占位符文本吗？
我使用HTML5的占位符属性将焦点放在文本字段中时，文本字段中的幽灵文本会消失：
<input type="text" name="email" placeholder="Enter email"/> 我想使用相同的机制，在textarea中有多行占位符文本，可能是这样的：
<textarea name="story" placeholder="Enter story\n next line\n more"></textarea>
但是，这些显示在文本中，不会导致换行符有没有办法有一个多行占位符？
更新 ：我得到这个工作的唯一方法是利用jQuery水印插件 ，它接受占位符文本中的HTML：
$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});
该规范不允许换行或回车字符。
占位符属性表示旨在帮助用户input数据的简短提示（单词或短语）。 提示可以是样本值或预期格式的简要描述。 该属性（如果指定）必须具有不包含U + 000A LINE FEED（LF）或U + 000D CARRIAGE RETURN（CR）字符的值。
显然，build议是使用title属性更长一些。
对于较长的提示或其他咨询文本，title属性更合适。
我发现，如果你使用了大量的空间，浏览器会正确地包装它。 不要担心使用确切数量的空格，只要在那里扔很多，浏览器应该正确地换行到下一行的第一个非空格字符。
<textarea name="address" placeholder="1313 Mockingbird Ln Saginaw, MI 45100"></textarea>
在大多数 （见下面的细节）浏览器中，在JavaScript中编辑占位符允许多行占位符。 正如前面所说的那样，它不符合规范 ，你不应该期待它在将来的工作。
此示例replace所有多行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>
实际上有一个黑客可以在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"; }
如果你想保持你的线路在一个地方，你可以尝试以下。 这其中的缺点是，其他浏览器比铬，Safari浏览器，WebKit等。 甚至不显示第一行：
<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上工作。
html5规范明确拒绝占位符字段中的新行。 当在占位符中使用换行符时，Webkit的版本/将会/插入新的行，但是这是不正确的行为，不应该被依赖。
我想段落不够简短的W3;）
如果你的textarea有一个静态的宽度，你可以使用不间断空间和自动textarea包装的组合。 只需将空格replace为每行的nbsp，并确保两条邻居行不能合并成一行。 在实践line length > cols/2 。
这不是最好的方法，但可能是唯一的跨浏览器解决scheme。
<textarea class="textAreaMultiligne" placeholder="Hello, This is multiligne example Have Fun " rows="5" cols="35"></textarea>
如果你使用的是AngularJS，你可以简单地使用大括号来放置任何你想要的东西： 这是一个小提琴。
<textarea rows="6" cols="45" placeholder="{{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea>
我不认为这是可能的HTML / CSS单独。 可能使用JavaScript或其他types的黑客多余空间将文本推送到下一行等。
你可以尝试使用CSS，它适用于我。 此处需要属性placeholder=" " 。
<textarea id="myID" placeholder=" "></textarea> <style> #myID::-webkit-input-placeholder::before { content: "1st line...\A2nd line...\A3rd line..."; } </style>
Bootstrap + contenteditable +多行占位符
演示： https ： //jsfiddle.net/39mptojs/4/
基于@cyrbil和@daniel的答案
使用Bootstrap，jQuery和https://github.com/gr2m/bootstrap-expandable-input在contenteditable中启用占位符。;
使用“占位符replace”JavaScript并添加“white-space：pre”到css，显示多行占位符。
HTML：
<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>
使用Javascript：
$(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); } }); });
CSS：
.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; }
原帖中的水印解决scheme效果很好。 谢谢。 如果有人需要它，这里是一个angular度指示。
(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')); } } } } }; }); }());
