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

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

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

相关内容(重点我):

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

在php工作良好反斜杠+ r (\r):

<textarea placeholder='This is a line \r this should be a new line'></textarea>

你可以插入一个新的行html实体&#10;在占位符属性内部:

< textarea name = " foo " placeholder =“你好you& 10;第二个line& #第三线" > < / textarea > 10;

适用于: Chrome 62, IE10, Firefox 60

不起作用: Safari 11

https://jsfiddle.net/lu1s/bxkjLpag/2/

使用自定义占位符检查此解决方案。

您将获得在所有浏览器(包括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>

我喜欢Jason Gennaro和Denis Golomazov的作品，但我想要一些在全球范围内更有用的东西。我已经修改了这个概念，这样它就可以添加到任何页面而不受影响。

http://jsfiddle.net/pdXRx/297/

<h1>Demo: 5 different textarea placeholder behaviors from a single JS</h1>

<h2>Modified behaviors</h2>

<!-- To get simulated placeholder with New Lines behavior,
     add the placeholdernl attribute -->

<textarea placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address' placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<h2>Standard behaviors</h2>

<textarea placeholder='Address'>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address'></textarea>

javascript非常简单

<script>
(function($){
var handleFocus = function(){
    var $this = $(this);
    if($this.val() === $this.attr('placeholdernl')){
        $this.attr('value', '');
        $this.css('color', '');
    }
};

var handleBlur = function(){
    var $this = $(this);
    if($this.val() == ''){
        $this.attr('value', $this.attr('placeholdernl'))
        $this.css('color', 'gray');
    }    
};

$('textarea[placeholdernl]').each(function(){
    var $this = $(this),
        value = $this.attr('value'),
        placeholder = $this.attr('placeholder');
    $this.attr('placeholdernl', value ? value : placeholder);
    $this.attr('value', '');
    $this.focus(handleFocus).blur(handleBlur).trigger('blur');
});
})(jQuery);
</script>