你能在<textarea>中拥有多行HTML5占位符文本吗？

Question

我在文本域中有鬼文本,当你使用HTML5的占位符属性关注它们时会消失:

<input type="text" name="email" placeholder="Enter email"/>

我想使用相同的机制在textarea中包含多行占位符文本,可能是这样的:

<textarea name="story" placeholder="Enter story\n next line\n more"></textarea>

但是那些\n出现在文本中并且不会引起换行...有没有办法让多行占位符？

更新:我使用它的唯一方法是使用 jQuery Watermark插件,该插件在占位符文本中接受HTML:

$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});

Answer 1

该规范不允许换行或回车字符.

占位符属性表示旨在帮助用户输入数据的简短提示(单词或短语).提示可以是样本值或预期格式的简要描述.如果指定,该属性必须具有不包含U + 000A LINE FEED(LF)或U + 000D CARRIAGE RETURN(CR)字符的值.

显然,建议使用<textarea>更长时间的属性.

对于更长的提示或其他咨询文本,title属性更合适.

编辑(1/8/18):

对于<textarea>这似乎并非如此.规范实际上概述了回车+换行符必须由浏览器呈现.

当元素的值为空字符串且控件未聚焦时(例如,通过将其显示在空白的未聚焦控件内),用户代理应将此提示呈现给用户.所有U + 000D CARRIAGE RETURN U + 000A LINE FEED字符对(CRLF)中的提示,以及所有其他U + 000D CARRIAGE RETURN(CR)和U + 000A LINE FEED(LF)字符的提示,必须予以处理渲染提示时的换行符.

请参阅文档:http://w3c.github.io/html/sec-forms.html#element-attrdef-textarea-placeholder
还反映在MDN上:https://developer.mozilla.org/en-US/docs/Web/HTML /元/ textarea的

FWIW,当我尝试使用Chrome 63.0.3239.132时,它确实可以正常工作.

Answer 2

在大多数(请参阅下面的详细信息)浏览器中,在javascript中编辑占位符允许多行占位符.正如所说,它不符合规范,你不应该期望它在未来工作(编辑:它确实有效).

此示例替换所有 multiline textarea的占位符.

var textAreas = document.getElementsByTagName('textarea');

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

<textarea class="textAreaMultiline" 
          placeholder="Hello, \nThis is multiline example \n\nHave Fun"
          rows="5" cols="35"></textarea>

_{JsFiddle片段.}

预期结果

基于评论,似乎某些浏览器接受此黑客攻击而其他浏览器则不接受.
这是我运行的测试的结果(使用browsertshots和browserstack)

• Chrome:> = 35.0.1916.69
• Firefox:> = 35.0(结果因平台而异)
• IE:> = 10
• 基于KHTML的浏览器:4.8
• Safari:否(已测试= Safari 8.0.6 Mac OS X 10.8)
• 歌剧:没有(测试<= 15.0.1147.72)

根据统计数据,这意味着它适用于当前(2015年10月)使用的浏览器的约88.7%.

更新:今天,它至少有94.4%的当前(2018年7月)使用的浏览器.

Answer 3

我发现如果你使用大量空间,浏览器将正确包装它.不要担心使用确切数量的空格,只需在那里扔很多,浏览器应该正确地换行到下一行的第一个非空格字符.

<textarea name="address" placeholder="1313 Mockingbird Ln         Saginaw, MI 45100"></textarea>

Answer 4

实际上有一个hack可以在Webkit浏览器中添加多行占位符,Chrome曾经可以工作但是在最新版本中他们删除了它:

首先像往常一样将占位符的第一行添加到html5

<textarea id="text1" placeholder="Line 1" rows="10"></textarea>

然后通过css添加其余行:

#text1::-webkit-input-placeholder::after {
    display:block;
    content:"Line 2\A Line 3";
}

如果您想将线条放在一个地方,可以尝试以下方法.其缺点是除了chrome,safari,webkit等其他浏览器.甚至不显示第一行:

<textarea id="text2" placeholder="." rows="10"></textarea>?

然后通过css添加其余行:

#text2::-webkit-input-placeholder{
    color:transparent;
}

#text2::-webkit-input-placeholder::before {
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";
}

演示小提琴

这将是非常好的,如果是这样可以在Firefox上使用类似的演示.

Answer 5

根据 MDN，

在呈现提示时，占位符文本中的回车符或换行符必须被视为换行符。

这意味着如果你只是跳到一个新行，它应该被正确渲染。IE

<textarea placeholder="The car horn plays La Cucaracha.
You can choose your own color as long as it's black.
The GPS has the voice of Darth Vader.
"></textarea> 

应该像这样呈现：

Answer 6

如果您使用的是AngularJS，则只需使用花括号将所需的内容放在其中：这是一个小提琴。

<textarea rows="6" cols="45" placeholder="{{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea>

Answer 7

这显然可以通过正常输入来完成，

<textarea name="" id="" placeholder="Hello awesome world. I will break line now

Yup! Line break seems to work."></textarea>

Answer 8

反应：

如果您使用的是 React，则可以按如下方式进行：

placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}