我尝试了一些方法,但没有一个奏效。有人知道绕过这个的妙招吗?

<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/


当前回答

稍微改进了Jason Gennaro的回答(见代码注释):

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);
$('textarea').focus(function(){
    if($(this).val() == placeholder){
        // reset the value only if it equals the initial one    
        $(this).attr('value', '');
    }
});
$('textarea').blur(function(){
    if($(this).val() == ''){
        $(this).attr('value', placeholder);
    }    
});
// remove the focus, if it is on by default
$('textarea').blur();

其他回答

你不能用纯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,不干净,但做到了。

如何使用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";
}

Textarea尊重占位符的空白属性。https://www.w3schools.com/cssref/pr_text_white-space.asp

将它设置为预行,为我解决了这个问题。

textarea { 空白:pre-line; } <textarea placeholder='这是一行 这应该是一个新的行'></textarea>

稍微改进了Jason Gennaro的回答(见代码注释):

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);
$('textarea').focus(function(){
    if($(this).val() == placeholder){
        // reset the value only if it equals the initial one    
        $(this).attr('value', '');
    }
});
$('textarea').blur(function(){
    if($(this).val() == ''){
        $(this).attr('value', placeholder);
    }    
});
// remove the focus, if it is on by default
$('textarea').blur();