我尝试了一些方法,但没有一个奏效。有人知道绕过这个的妙招吗?
<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/
但需要注意的是,问题的前提与W3规范不一致,因此不能保证行为,解决方案使用&x10;工作时<textarea>是要在HTML中定义:
<textarea
placeholder="HTML entity works but unicode entity hard-coded \u000A !">
</textarea>
但是如果<textarea>是用JavaScript创建的,那么 实体将在输出中硬编码。然而,使用unicode等效的\u000A是可以的:
let myArea = document.createElement("textarea");
myArea.placeholder = "Unicode works \u000A But HTML entity hard-coded !";
根据我所看到的三种不同技巧的组合,这似乎在我测试过的所有浏览器中都有效。
HTML:
<textarea placeholder="Line One Line Two 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>
注意,额外的空间将导致一个干净的环绕,但必须有足够的空间,它将填补文本区域的宽度,我放置了足够的空间,它足以为我的项目,但你可以通过观察文本区域来生成它们。宽度和计算适当的基数。
但需要注意的是,问题的前提与W3规范不一致,因此不能保证行为,解决方案使用&x10;工作时<textarea>是要在HTML中定义:
<textarea
placeholder="HTML entity works but unicode entity hard-coded \u000A !">
</textarea>
但是如果<textarea>是用JavaScript创建的,那么 实体将在输出中硬编码。然而,使用unicode等效的\u000A是可以的:
let myArea = document.createElement("textarea");
myArea.placeholder = "Unicode works \u000A But HTML entity hard-coded !";