您可以在<textarea>中使用多行HTML5占位符文本吗?

我使用HTML5的占位符属性专注于它们时,文本字段中的幽灵文本消失了:

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

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

<textarea name="story" placeholder="Enter storyn next linen more"></textarea>

但是,这些n S IN的文字显示出来,并不会引起新行......有没有办法有一个多占位?

更新 :我得到这个工作的唯一方法是利用jQuery Watermark插件,该插件在占位符文本中接受HTML:

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

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

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

显然,建议是使用title属性更长。

对于较长的提示或其他咨询性文字,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/Element/textarea

FWIW,当我尝试使用Chrome 63.0.3239.132时,它确实按照它的说法工作。


在大多数浏览器中(见下面详细介绍),在javascript中编辑占位符允许多行占位符。 正如已经说过的那样,它不符合规范,你不应该指望它在未来工作。

本示例替换所有多行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 nnHave Fun"
          rows="5" cols="35"></textarea>

我发现如果你使用了很多空格,浏览器会正确地包装它。 不要担心使用精确数量的空格,只需在该处添加大量空间,并且浏览器应该正确换行到下一行中的第一个非空格字符。

<textarea name="address" placeholder="1313 Mockingbird Ln         Saginaw, MI 45100"></textarea>
链接地址: http://www.djcxy.com/p/70517.html

上一篇: Can you have multiline HTML5 placeholder text in a <textarea>?

下一篇: specific CSS selectors at once