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

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


当前回答

你不能用纯HTML做到这一点,但这个jQuery插件可以让你:https://github.com/bradjasper/jQuery-Placeholder-Newlines

其他回答

试试这个:

<textarea
placeholder="Line1&#x0a;&#x09;&#x09;&#x09;Line2"
cols="10"
rows="5"
style="resize:none">
</textarea>

http://jsfiddle.net/vr79B/

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

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

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

根据我所看到的三种不同技巧的组合,这似乎在我测试过的所有浏览器中都有效。

HTML:

<textarea placeholder="Line One&#10;Line Two&#10;&#10;Line Four"></textarea>

JS在HTML文件底部:

<script>
    
    var textAreas = document.getElementsByTagName('textarea');

    Array.prototype.forEach.call(textAreas, function(elem) {
        elem.placeholder = elem.placeholder.replace(/\u000A/g, 
        '                                                     \
                                                              \
                                                              \
        \n\u2063');
    });

</script>

注意,额外的空间将导致一个干净的环绕,但必须有足够的空间,它将填补文本区域的宽度,我放置了足够的空间,它足以为我的项目,但你可以通过观察文本区域来生成它们。宽度和计算适当的基数。

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

使用& # 10;在\n的地方,这将改变这一行。