Can you have multiline HTML5 placeholder text in a <textarea>?
I have ghost text in textfields that disappear when you focus on them using HTML5's placeholder attribute:
<input type="text" name="email" placeholder="Enter email"/>
I want to use that same mechanism to have multiline placeholder text in a textarea, maybe something like this:
<textarea name="story" placeholder="Enter storyn next linen more"></textarea>
But those n s show up in the text and don't cause newlines... Is there a way to have a multiline placeholder?
UPDATE : The only way I got this to work was utilizing the jQuery Watermark plugin, which accepts HTML in the placeholder text:
$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});
The specification does not allow line feed or carriage return characters.
The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format. The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.
Apparently, the recommendation is to use a title attribute for anything longer.
For a longer hint or other advisory text, the title attribute is more appropriate.
EDIT (1/8/18):
For <textarea> 's this does not appear to be the case. The spec actually outlines that carriage returns + line breaks MUST be rendered as such by the browser.
User agents should present this hint to the user when the element's value is the empty string and the control is not focused (eg, by displaying it inside a blank unfocused control). All U+000D CARRIAGE RETURN U+000A LINE FEED character pairs (CRLF) in the hint, as well as all other U+000D CARRIAGE RETURN (CR) and U+000A LINE FEED (LF) characters in the hint, must be treated as line breaks when rendering the hint.
See docs: http://w3c.github.io/html/sec-forms.html#element-attrdef-textarea-placeholder
Also reflected on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
FWIW, when I try on Chrome 63.0.3239.132, it does indeed work as it says it should.
On most (see detail below) browser, editing the placeholder in javascript do allows multiline placeholder. As it has been said, it's not compliant with the specification and you shouldn't expect it to work in the future.
This example replace all multiline textarea's placeholder.
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>I find that if you use a lot of spaces, the browser will wrap it properly. Don't worry about using an exact number of spaces, just throw a lot in there, and the browser should properly wrap to the first non space character on the next line.
<textarea name="address" placeholder="1313 Mockingbird Ln Saginaw, MI 45100"></textarea>
上一篇: 如何更改重点的占位符颜色？