我尝试了一些方法，但没有一个奏效。有人知道绕过这个的妙招吗?
<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/
当前回答
使用自定义占位符检查此解决方案。
您将获得在所有浏览器(包括Firefox)中都可用的多行占位符 这是可以自定义占位符，因为你想要
演示小提琴。
$(document).on('input', '#textArea', function () { if ($('#textArea').val()) { $('#placeholderDiv').hide(); } else { $('#placeholderDiv').show(); } }); #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; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="textAreaWrap"> <textarea id="textArea"></textarea> <!-- Check here. If textarea has content - set for this div attribute style="display: none;" --> <div id="placeholderDiv">Multiline textarea<br> placeholder<br> <br> that works in Firefox</div> </div>
其他回答
更新(2016年1月):这个漂亮的小黑客可能不再适用于所有浏览器，所以我有一个新的解决方案，下面有一小部分javascript。
一个不错的小技巧
这感觉不太好，但你可以把新行放到html中。是这样的:
<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House " 朗街1号 伦敦 邮政编码 英国" > < / >文本区域
注意，每一行都在新行上(没有被换行)，每个“制表符”缩进是4个空格。虽然这不是一个很好的方法，但它似乎是有效的:
http://jsfiddle.net/01taylop/HDfju/
每行的缩进程度可能会根据文本区域的宽度而变化。 重要的是设置resize: none;在css中，这样文本区域的大小是固定的(参见jsfiddle)。
另外 当你想要一个新的行，点击返回两次(所以在你的“新行”之间有一个空行。这个“空行”创建需要有足够的制表符/空格，将等同于你的文本区域的宽度。如果你有太多似乎并不重要，你只需要足够。这太脏了，可能不兼容浏览器。我希望有更简单的方法!
更好的解决方案
查看JSFiddle。
This solution positions a div behind the textarea. Some javascript is used to change the background colour of the textarea, hiding or revealing the placeholder appropriately. The inputs and placeholders must have the same font sizes, hence the two mixins. The box-sizing and display: block properties on the textarea are important or the div behind it will not be the same size. Setting resize: vertical and a min-height 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 resize property will cause issues when expanding the textarea horizontally. Just make sure the min-height on the textarea is enough to cover your entire placeholder at its smallest width.**
HTML:
<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>
SCSS:
$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;
&.data-edits {
background-color: #fff;
}
}
.textarea-placeholder {
position: relative;
> 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();
}
Javascript:
$("textarea").on('change keyup paste', function() {
var length = $(this).val().length;
if (length > 0) {
$(this).addClass('data-edits');
} else {
$(this).removeClass('data-edits');
}
});
你不能用纯HTML做到这一点，但这个jQuery插件可以让你:https://github.com/bradjasper/jQuery-Placeholder-Newlines
您可以做的是将文本作为值添加，它尊重换行符\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，不干净，但做到了。
使用自定义占位符检查此解决方案。
您将获得在所有浏览器(包括Firefox)中都可用的多行占位符 这是可以自定义占位符，因为你想要
演示小提琴。
$(document).on('input', '#textArea', function () { if ($('#textArea').val()) { $('#placeholderDiv').hide(); } else { $('#placeholderDiv').show(); } }); #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; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="textAreaWrap"> <textarea id="textArea"></textarea> <!-- Check here. If textarea has content - set for this div attribute style="display: none;" --> <div id="placeholderDiv">Multiline textarea<br> placeholder<br> <br> that works in Firefox</div> </div>
使用& # 10;在\n的地方，这将改变这一行。
