Add HTML5 placeholder text to a textbox .net

Question

I have a standard input:

<asp:TextBox type="text" runat="server" id="txtSearchTerm" />

I'd like to have this render with a dynamic HTML5 placeholder. Something like:

'Code Behind
txtSearchTerm.**placeholder** = "Search " + Site.Name

So that it outputs the following HTML:

<input type="text" runat="server" id="txtSearchTerm" 
placeholder="Search Site #1" />

where Site.Name = "Site #1".

txtSearchTerm.placeholder is not a property. I have it set to text and then run javascript to show/hide on focus BUT I would much rather just use the HTML5 placeholder value. How can I render this?

Please no JS/client side solutions.

See also http://stackoverflow.com/questions/15823983/how-do-i-put-hint-in-a-asptextbox — goodeye, May 23 '16 at 22:52

Steven V · Accepted Answer · 2016-09-21T13:45:27.073

You could use the Attributes collection. So you would have something like

txtSearchTerm.Attributes.Add("placeholder", "Search" + Site.Name);

or

txtSearchTerm.Attributes["placeholder"] = "Search" + Site.Name; // or Attributes("placeholder") if you're using vb.net

And if you're using resources for localization/translation:

txtSearchTerm.Attributes["placeholder"] = GetLocalResourceObject("YourLocalResourceName").ToString();

score 19 · Answer 2 · answered Dec 24 '13 at 15:30

Because I find it annoying/tiresome to add all the placeholders from the code behind. You can create a new TextBox Class that inherits the WebControls TextBox and then you can add the placeholder from the CodeBehind or from the HTML Side.

TextBox.cs (Placed in Project/Controls/)

namespace Project.Controls
{
    public class TextBox : System.Web.UI.WebControls.TextBox
    {
        public string PlaceHolder { get; set; }

        protected override void OnLoad(EventArgs e)
        {
            if(!string.IsNullOrWhiteSpace(PlaceHolder))
                this.Attributes.Add("placeholder", PlaceHolder);

            base.OnLoad(e);
        }
    }
}

Register Control In the Web.Config:

  <system.web>
    <pages>
      <controls>
        <add tagPrefix="ext" assembly="Project" namespace="Project.Controls" />
      </controls>
    </pages>
  </system.web>

(use whatever tag prefix you want)

Usage:

<ext:TextBox runat="server" id="SomeId" PlaceHolder="This is a PlaceHolder" />

or from the code behind

SomeId.PlaceHolder="This is a PlaceHolder";

From the ASPX file, can the assignment of PlaceHolder be dynamic? A dynamic placeholder is the goal of the question. — Michael R, Apr 07 '16 at 23:26
Sure it could be assigned dynamically. It can be used just like any other control property. Do you have a specific use case? Maybe I could help you solve that. — Tony, Apr 08 '16 at 03:24

score 9 · Answer 3 · edited Aug 25 '16 at 11:57

9

I just put placeholder property in HTML code and works:

<asp:TextBox placeholder="hola mundo" ID="some_id" runat="server"/>

edited Aug 25 '16 at 11:57

rdans

2,179
22
32

answered May 19 '16 at 00:12

RonaldPaguay

337
3
12

This works, but Visual Studio (2015 for me) may display an "_Attribute 'placeholder' is not a valid attribute of element 'TextBox'_" message in its **Error List**. – Mike Grove aka Theophilus Sep 13 '17 at 20:05

score 0 · Answer 4 · answered Dec 19 '13 at 20:00

0

There is also the TextBoxWatermark extender included in Microsoft's Ajax Control toolkit. It's not HTML5, but it's backwards compatible (I believe). http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/TextBoxWatermark/TextBoxWatermark.aspx

<ajaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server"
    TargetControlID="TextBox1"
    WatermarkText="Type First Name Here"
    WatermarkCssClass="watermarked" />

answered Dec 19 '13 at 20:00

mason

31,774
10
77
121

1

Watch out here. OP asked for no Javascript solutions here and the ajax toolkit relies heavily on Javascript. Looking at it, you're correct it is backwards compatible via Javascript, but also doesn't implement the HTML5 placeholder if the browser supports it. – Steven V Dec 19 '13 at 21:40

Add HTML5 placeholder text to a textbox .net

4 Answers4

Linked