萨拉蒙·阿莱库姆




适用于谷歌Chrome浏览器

<textarea placeholder="Enter Choice#1 &#10;Enter Choice#2 &#10;Enter Choice#3"></textarea>

我在Windows 10.0 (Build 10240)和谷歌Chrome版本上测试了这个 47.0.2526.80米 2015年12月17日星期四，1437，拉比奥瓦尔，AST 6 08:43:08

谢谢你！

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

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>

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

但需要注意的是，问题的前提与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 
 !";

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

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

我来这里是为了一个多行占位符解决方案，然后我意识到接受的解决方案不工作时，文本区域是在formik形式。

在这种情况下，解决方案就是模板字面量。它允许您指定多行文本字符串。

    <textarea
        cols={40}
        placeholder={`day 1: Temple visit,&#13;&#10;
        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}
/>

源