Text Box to change on focus... Possible?

Hi i was just wondering if it was possible to change a text boxes default value onFocus... I have a search bar and rather then put next to it search product here I wanted to have written in the text box as default Enter Product Code.. and then when the box is clicked on it clears this text away and has a blank textbox before they begin to type

Thanks in advance for any help given

Hey,

Yes, there are two ways to do it. There is a TextboxWatermarkExtender (in the AJAXControlToolkit), which renders the text and manages that automatically for you, or you can use manual javascript, simply by catching the focus and when the textbox value is equal to the watermark value, clear it. I don't have an example on-hand, but you should be able to find one.

Create a test ASPX and add following:

<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Text="Enter Here"></asp:TextBox> <br/>
</div>
</form>
<script language="javascript" type="text/javascript">
function ClearValue()
{
document.getElementById("<%=TextBox1.ClientID %>").value = "";
}
</script>

In Code Behind add following:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
TextBox1.Attributes.Add("OnFocus", "javascript:ClearValue();")
End Sub

Hope this will serve the purpose.

Code for the text box:

<input id="txtBox1" type="text" value="Some Default Value" onfocus="ClearTxt();" />

Javascript function to clear default value:

<script type="text/javascript">
function ClearTxt() {
document.getElementById("txtBox1").value = ""
}
</script>

you could use a javascript method like teh one shown here

http://www.urban75.org/tech/q024.html

Thanks alot guys for all the help

try this

tst.Attributes.Add("onFocus","ctrl = document.getElementById('tst');ctrl.value = '';")

replace both occurrences of tst with the name of the textbox

Hi sorry i know this is an old post but I was wondering, I managed to get this working the only little thing is if I click in the box it deletes the text (what I was looking for) but if I dont type anything and click away from the box it's still blank.. I was wondering if there was a way to refill the text box with the default text again

Thanks

Hey,

Attach to the client onblur event, that if the textbox's text length is zero, put the text back in the textbox.

I know I am a strong anti-Javascript developer, but using javascript to set properties of a form control is not a very good idea, especially if you consider accessibility issues. Rather, why not to attach labels to the text box, and/or use tool-tip feature for displaying user information. This is both, dynamic, on focus, as well as Accessible to challanged users.

Again, it is kind of personal opinion, but then you have to think about the accessibility issues at some point of time!