我尝试了一些方法,但没有一个奏效。有人知道绕过这个的妙招吗?
<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:
<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 !";
您可以做的是将文本作为值添加,它尊重换行符\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,不干净,但做到了。
我来这里是为了一个多行占位符解决方案,然后我意识到接受的解决方案不工作时,文本区域是在formik形式。
在这种情况下,解决方案就是模板字面量。它允许您指定多行文本字符串。
<textarea
cols={40}
placeholder={`day 1: Temple visit,
day 2: Jungle barbeque,\n
day 3: Waterfall visit in the evening,\n
day 4: Visit UNESCO World Heritage Site,\n
day 5: Art gallery show,\n
day 6: Visit grand swimming pool,\n
day 7: Visit to Blue fort`}
rows={20}
/>
源