我尝试了一些方法，但没有一个奏效。有人知道绕过这个的妙招吗?
<textarea placeholder='This is a line \n this should be a new line'></textarea>
<textarea placeholder='This is a line
should this be a new line?'></textarea> <!-- this works in chrome apparently -->
更新:它不工作在chrome。它只是textarea的宽度。
参见:http://jsfiddle.net/pdXRx/
当前回答
这个问题可以通过使用占位符显示的选择器和超级强加的背景来解决，如果你的实现允许:
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;
}
https://codepen.io/franciscoaquino/pen/YzyBPYK
选择器支持:
https://caniuse.com/#feat=css-placeholder-shown
其他回答
只添加
用于断行，不需要编写任何CSS或javascript。
textarea { 宽度:300 px; 身高:100 px; ｝ <textarea占位符='这是一行这
应该是一个新行'></textarea> <textarea placeholder='这是一行 这应该是一条新线吗?" > < / >文本区域
如果你在ASP中使用Razor。NET项目，你可以做下面的事情，这对很长的占位符值很有帮助:
@{
string strPlaceholder = "Shipment Id to Update, Container Id to Update, New Tracking Number \r\n"
+ "Shipment Id to Update, Container Id to Update, New Tracking Number \r\n"
+ "Shipment Id to Update, Container Id to Update, New Tracking Number \r\n"
+ "\r\n"
+ "i.e. to update all containers with shipment Id 5803407, etner like this: \r\n"
+ "5803407, , 1Z20579A0322337062 \r\n"
+ "\r\n"
+ "or to update a specific container Id, enter like this: \r\n"
+ "5803407, 112546247, 1Z20579A0322337062 \r\n"
;
}
<textarea type="text" class="form-control" style="height:650px;" id="ShipmentList" name="ShipmentList"
placeholder="@strPlaceholder" required></textarea>
我把@Richard Bronosky的小提琴改装成这样。
使用data-*属性而不是自定义属性是更好的方法。 我将<textarea placeholdernl>替换为<textarea data-placeholder>和其他一些风格。
编辑 这里是理查德的原始答案，其中包含完整的代码片段。
Textarea尊重占位符的空白属性。https://www.w3schools.com/cssref/pr_text_white-space.asp
将它设置为预行，为我解决了这个问题。
textarea { 空白:pre-line; ｝ <textarea placeholder='这是一行 这应该是一个新的行'></textarea>
您可以做的是将文本作为值添加，它尊重换行符\n。
$('textarea').attr('value', 'This is a line \nthis should be a new line');
然后你可以在焦点上删除它，然后在模糊上应用它(如果为空)。就像这样
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);
}
});
例如:http://jsfiddle.net/airandfingers/pdXRx/247/
不是纯粹的CSS，不干净，但做到了。
