Display hint for text inside asp's textbox

Question

I'm looking for ways to display some text for the user within an <asp:textbox> that can help him know what data/format of text he should enter in each textbox. It's looks like this (Sample from Facebook Sign up page) :

enter image description here

My only solution now is to

1- set the default text for the textbox in the aspx
2- Set its color to grey
3- Onclick of the textbox :
1- Change color to black
4- Onchange, if text is empty set the text back to default

This sounds like i'm developing in the 90s, is there an out-of-the-box property for the textbox to do this, or any more intelligent way to do it ?

Happy New Year

score 5 · Answer 1 · edited May 23 '17 at 12:18

5

Use the placeholder attribute,

<input type="text" placeholder="First Name">

Here's a Demonstration.

NOTE:

This attribute only exists in HTML5, and is unsupported in IE < 10, so for IE 7, 8 and 9 see this stackoverflow question, which in turn suggests jQuery Placeholder.

There is also a pure jQuery work-around, explored here.

edited May 23 '17 at 12:18

Community

1
1

answered Dec 31 '14 at 16:32

theonlygusti

11,032
11
64
119

Can an input field be data bound by any way ? Something like "Text='<%# Bind("SomeField") %>'" of the textbox ? – user3340627 Dec 31 '14 at 16:53
What does data bound mean? – theonlygusti Dec 31 '14 at 16:57
Meaning that if this input control is in a formview which is bound to a datasource, is there a way to bind the input control to a field of the formview datasource so that it displays the data from the database in addition to accepting input from the user for that field? – user3340627 Dec 31 '14 at 16:58
You can do that via PHP only (or your server-side scripting language), just set the placeholder/value attribute of the wanted textbox. – theonlygusti Dec 31 '14 at 17:00

score 4 · Answer 2 · answered Dec 31 '14 at 16:37

In html5 there is an attribute that does that for you. It's the placeholder attribute. For older browsers, you can polyfill that functionality with placeholder.js; all you have to do is include that script in your page, and it'll work.

<input type="text" placeholder="my super cool placeholder text here" />

score 0 · Accepted Answer · edited May 23 '17 at 10:33

Thanks to theonlygusti and J.Wells answer, I got to know what a "placeholder" is. And thanks to this post, I was able to make use of it in my textbox

This answer better serves my purpose as i do not have to change my Textbox into an input field. I used the code below and it worked perfectly :

    protected void txtBirthDate_PreRender(object sender, EventArgs e)
    {
        ((TextBox)sender).Attributes.Add("placeholder", "dd/mm/yyyy");
    }

Here's the result for my textbox:

enter image description here

EDIT:

From Anant Dabhi's answer here I discovered that I can simply do this :

<asp:TextBox ID="TextBox1" runat="server" placeholder="dd/mm/yyyy" ></asp:TextBox>

Display hint for text inside asp's textbox

3 Answers3