CODEWITHSUNDEEP
asp.net.netvb.nethtml
tiffylou
tiffylou

Reputation: 546

Add HTML5 placeholder text to a textbox .net

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.

Upvotes: 25

Views: 59221

Answers (4)

Steven V
Steven V

Reputation: 16595

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();

Upvotes: 44

RonaldPaguay
RonaldPaguay

Reputation: 335

I just put placeholder property in HTML code and works:

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

Upvotes: 9

Tony
Tony

Reputation: 1307

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";

Upvotes: 19

mason
mason

Reputation: 32694

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" />

Upvotes: 0

Related Questions