Why Isn't My Textarea's Placeholder Showing Up

HTML5 textarea placeholder not appearing

This one has always been a gotcha for me and many others. In short, the opening and closing tags for the <textarea> element must be on the same line, otherwise a newline character occupies it. The placeholder will therefore not be displayed since the input area contains content (a newline character is, technically, valid content).

Good:

<textarea></textarea>

Bad:

<textarea>
</textarea>

Update (2020)

This is not true anymore, according to the HTML5 parsing spec:

If the next token is a U+000A LINE FEED (LF) character token, 
then ignore that token and move on to the next one. (Newlines 
at the start of textarea elements are ignored as an authoring 
convenience.)

You might still have trouble if you editor insists on ending lines with CRLF, though.

Textarea placeholder not showing up

Try deleting the whitespaces:

<textarea placeholder="text" name="comments" maxlength="1000" cols="25" rows="6"></textarea>

Why isn't my textarea's placeholder showing up?

Because you have something as text in your textarea with a linebreak in it.

<textarea rows="5" cols="30" placeholder="enter optional message">
        </textarea><br />

Should be:

<textarea rows="5" cols="30" placeholder="enter optional message"></textarea><br />

Place holder not working in textarea

A textarea's original value is based on the text between the opening and closing tag.
Make your textarea markup look like this and it should work:
<textarea onfocus="if(this.value=='Message')this.value='';" onblur="if(this.value=='')this.value='Message';">Message</textarea>

As shadow pointed out, you should also take a look at the HTML5 placeholder attribute

MVC Helper TextArea - Placeholder not displaying

Put an @ before the style and placerholder, like so, maybe even put htmlAttributes: before it.

@Html.TextArea("txtComments", htmlAttributes: new { @style = "width: 450px;", @placeholder = "Enter Comments here" })

And this is the exact output I get:

<textarea cols="20" id="txtComments" name="txtComments" placeholder="Enter Comments here" rows="2" style="width: 450px;"></textarea>

If this shows a placeholder but it still isn't showing, make sure you're using an up-to-date web browser, you can find a list of the supported browsers here: http://caniuse.com/input-placeholder

< IE10 does not support it.

If you do need support in those browsers, maybe this solution will help you: http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

Textarea placeholder isn't shown in IE 11 being rendered using React

So it appears the PR that will fix this in React has just been reviewed and accepted: https://github.com/facebook/react/pull/6406

I would expect the fix to be released soonish.

---

Related Topics