我尝试了一些方法，但没有一个奏效。有人知道绕过这个的妙招吗?
<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/
当前回答
您可以做的是将文本作为值添加，它尊重换行符\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，不干净，但做到了。
其他回答
使用& # 10;在\n的地方，这将改变这一行。
您可以做的是将文本作为值添加，它尊重换行符\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>
非常简单的
var position = your break position;
var breakLine = " ";//in html
var output = [value.slice(0, position), breakLine, value.slice(position)].join('');
return output;
值表示原始字符串
如何使用CSS解决方案:http://cssdeck.com/labs/07fwgrso
::-webkit-input-placeholder::before {
content: "FIRST\000ASECOND\000ATHIRD";
}
::-moz-placeholder::before {
content: "FIRST\000ASECOND\000ATHIRD";
}
:-ms-input-placeholder::before {
content: "FIRST\000ASECOND\000ATHIRD";
}
