How to display default text for asp.net textboxes

Question

How do I set default text for asp textbox during page load and clear them when focused on..

I know to do it in html textbox using javascript and jquery..But how to do it in asp.net.. Any help please..

I wrote

<asp:TextBox ID="Rloginemail" runat="server" Width="100%" Height="25px" 
     BackColor="#ECE8D0" BorderStyle="None" ForeColor="#482B1B" 
     Text="E-MAIL" >E-MAIL</asp:TextBox>

In the above code you can see text=email.. if I use this default text is shown but not cleared on focus..

Or see [How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?](http://stackoverflow.com/questions/3429520/how-do-i-get-placeholder-text-in-firefox-and-other-browsers-that-dont-support-t). — CodeCaster, Nov 28 '13 at 10:58
But all these answers puts hint in the left side corner of textbox,but i want in middle..IS that possible.. — Sasidharan, Nov 28 '13 at 11:19

score 10 · Accepted Answer · answered Nov 28 '13 at 10:55

10

HTML 5

You can use placeholder html5 attribute

<input type="text" placeholder="search" />

jQuery Placeholder Plugin

If your browser doesnt support then use this jquery placeholder

$('input, textarea').placeholder()

answered Nov 28 '13 at 10:55

Murali Murugesan

22,423
17
73
120

score 2 · Answer 2 · answered Nov 28 '13 at 13:19

You have mentioned that you can do it for html textbox using javascript or jQuery, but don't know how to do it with Asp.Net textbox. right? Is it just because id of your asp.net textbox changes dynamically and you are not able to access it?. If yes, then you can access the id using following code:

document.getElementById("<%=textbox.ClientID%>")

You can use above code in the script written in the aspx code to get asp.net textbox and then you can use javascript/jQuery as you know how to do it.

score 0 · Answer 3 · edited May 23 '17 at 12:18

0

Use OnFocus event and set Text property to empty string

Example:

<asp:TextBox ID="Rloginemail" runat="server" Width="100%" Height="25px" BackColor="#ECE8D0" BorderStyle="None" ForeColor="#482B1B" Text="E-MAIL" onfocus="if (this.value == 'E-MAIL')  this.value = ''; ">E-MAIL</asp:TextBox>

Or, as mentioned in this answer - you can also use asp.net textbox property called placeholder:

        <asp:TextBox ID="Rloginemail" runat="server" Width="100%" Height="25px" 
                     BackColor="#ECE8D0" BorderStyle="None" ForeColor="#482B1B" 
                     placeholder="E-MAIL" ></asp:TextBox>

edited May 23 '17 at 12:18

Community

1
1

answered Nov 28 '13 at 10:55

Nogard

1,779
2
18
21

"I know to do it in html textbox using javascript and jquery..But how to do it in asp.net" – tariq Nov 28 '13 at 11:05
html textbox is not asp textbox. And you cant do it in pure ASP.net as it would require postback to process. Check others solutions if you doubt so – Nogard Nov 28 '13 at 11:07
i know that its not possible purely through ASP.net, nearest would be to use ajax control toolkit, isn't it? – tariq Nov 28 '13 at 11:10

score 0 · Answer 4 · answered Nov 28 '13 at 10:56

In asp.net you can do it by using ajax control toolkit. we have a TextboxExtender there which can do it besides other things as below

<ajaxToolkit:TextBoxWatermarkExtender ID="TBE" runat="server"
TargetControlID="youTextBoxID"
WatermarkText="YOUR DEFAULT TEXT"
WatermarkCssClass="yourPreferred css" />

score 0 · Answer 5 · answered Nov 28 '13 at 11:03

0

We use Ajax Control Toolkit's Textbox Watermark extender for this: http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/TextBoxWatermark/TextBoxWatermark.aspx

answered Nov 28 '13 at 11:03

SteinIP

376
4
5

score 0 · Answer 6 · answered Nov 28 '13 at 11:03

0

  $(document).ready(function () {
    $(":input[data-watermark]").each(function () {
        $(this).val($(this).attr("data-watermark"));
        $(this).css("color", "#a8a8a8");
        $(this).bind("focus", function () {
            if ($(this).val() == $(this).attr("data-watermark")) $(this).val('');
            $(this).css("color", "#000000");
        });
        $(this).bind("blur", function () {
            if ($(this).val() == '') {
                $(this).val($(this).attr("data-watermark"));
                $(this).css("color", "#a8a8a8");

            }
            else {
                $(this).css("color", "#000000");
            }
        });
    });
});

style

<style>
.placeholder {
color: #a8a8a8;

}

::-webkit-input-placeholder {
color: #a8a8a8;

}

:-moz-placeholder {
color: #a8a8a8;

}

.home_textbox{width:155px; height:25px; border:1px solid #c9c5c1; border-radius:5px; position:relative; font-size:13px; color:#b5b0aa; font-family:"Myriad Pro"; padding:0 5px;}

textbox

<input type="text" name="TxtLogin" id="TxtLogin"
                            class="home_textbox" runat="server" tabindex="1" style="color:Black;" data-watermark="Username" />

answered Nov 28 '13 at 11:03

Indranil.Bharambe

1,462
3
14
25

2

You might want to mention where you copied that from and what it does. – CodeCaster Nov 28 '13 at 11:13
2

also this is pure html/jquery way to do it - nothing related to asp.net. Funny how it is the right answer for OP – Nogard Nov 28 '13 at 11:15
user didnt tag jquery that doesnt mean he doesnot contain it. and CodeCaster i didnt copy.. I did it in my project .. so please – Indranil.Bharambe Nov 28 '13 at 11:17
1

See http://stackoverflow.com/questions/7433589/input-with-watermark-css-jquery. – CodeCaster Nov 28 '13 at 11:18
you want proof that i have included in my project and i copy paste it from my project? – Indranil.Bharambe Nov 28 '13 at 11:20
Question was centered differently and accepted answer different – tariq Nov 28 '13 at 11:20

How to display default text for asp.net textboxes

6 Answers6