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

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


当前回答

只添加&#10用于断行,不需要编写任何CSS或javascript。

textarea { 宽度:300 px; 身高:100 px; } <textarea占位符='这是一行这&#10应该是一个新行'></textarea> <textarea placeholder='这是一行 这应该是一条新线吗?" > < / >文本区域

其他回答

但需要注意的是,问题的前提与W3规范不一致,因此不能保证行为,解决方案使用&x10;工作时<textarea>是要在HTML中定义:

<textarea 
  placeholder="HTML entity works &#10; but unicode entity hard-coded \u000A !">
</textarea>

但是如果<textarea>是用JavaScript创建的,那么&#10;实体将在输出中硬编码。然而,使用unicode等效的\u000A是可以的:

let myArea = document.createElement("textarea");
myArea.placeholder = "Unicode works \u000A But HTML entity hard-coded &#10; !";

您可以做的是将文本作为值添加,它尊重换行符\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,不干净,但做到了。

稍微改进了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();

我把@Richard Bronosky的小提琴改装成这样。

使用data-*属性而不是自定义属性是更好的方法。 我将<textarea placeholdernl>替换为<textarea data-placeholder>和其他一些风格。

编辑 这里是理查德的原始答案,其中包含完整的代码片段。

不要认为你可以这样做:http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

相关内容(重点我):

占位符属性表示一个简短的提示(一个单词或简短的提示) 短语),用于帮助用户在控件出现故障时输入数据 没有价值。方法的示例值或简要描述可以是提示 预期的格式。如果指定了属性,则该属性的值必须为 不包含U+000A换行(LF)或U+000D回车(CR) 字符。