MVC Helper TextArea - Placeholder not displaying

Question

I have the following code in my .cshtml:

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

But the placeholder is not displaying at all. Am I missing something?

Source:

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

Fad

As I said, the code is working, it's displaying your placeholder. Are you sure it's not a problem with your CSS? – Wording

Dono whatz causing. Am trying in an empty page without Css also but still not coming up..Weird – Fad

What browser are you currently using? – Wording

Answer 1

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

Wording

Then something else is the problem as that code works for me. Can you post the html that is generated by your @Html.TextArea line? Check that the placeholder isn't there but your css has stopped it dispalying. – Wording

should be a bowser thing. am using IE8. Thanks – Fad

Consider upgrading to browser which supports modern internets, such as Firefox or Chrome. This will fix your issues but remember, anyone using your apps who uses old browsers will not be able to see placeholders. Bear this in mind. – Wording

yes i have chrome. But my client uses IE. so i use for DEV :) Thanks – Fad

i cant Vote up . i need 15 :D – Fad

No problem, there are fixes for IE I'm sure. Deploy the Google fu! – Wording

Interesting, this works: new { @placeholder = "Into / Teaser Text" } ) but this does not: new { htmlAttributes = new { @class = "form-control", placeholder = "Friendly Url" } } nor does it work with @placeholder – Rhetor

Dan Beauliei: This was my issue! Thanks. Your comment fixed mine. I removed the "htmlAttributes" but and just started with new { and now it works! Winner, thanks mate. – Cooky

Me too! I moved it forward into the first new and it works for TextAreaFor.: Html.TextAreaFor(model => model.OtherComments, new { placeholder = "Optional", htmlAttributes = new { @class = "form-control", rows = "4", cols = "50"} }) EditorFor it goes in htmlAttributes area. I used "@" for both. – Deckard

Answer 2

This one is working for me (asp.net v4.6.2 mvc5) :

@Html.TextAreaFor(model => model.MyMessageForm.MessageText, new { placeholder = "Your msg here...", @class = "form-control" } )

Sensual