There are different solutions on the web that describes how to implement a watermark over an asp.net TextBox. The solution I still prefer is just using JavaScript with of asp.net's parser capabilities:
Into your ASPX markup page, try the solution posted below. solution:
<script type = "text/javascript">
// This Javascript is written by Peter Velichkov (www.creonfx.com)
// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanks
// Defining array that holds the IDs or Names of the inputs and the default text to display
// If you are using Names remeber that I am taking only the first one.
// The format is : 'ID1','VALUE1','ID2','VALUE2'....
// var inputs = new Array('firstname','firstvalue','secondid','secondvalue','thirdid','thirdvalue')
// Defining "indexOf" function for Internet Explorer
// It returns the index of the first occurance of an item in the array
// As you can see i'm just inject the Asp.Net TextBoxes client side's IDs into the Javascript Code
var inputs = new Array('<%= txtSearchTerms.ClientID %>','Search...','<%= txrLogin.ClientID %>','Login...');
if (!Array.indexOf) {
Array.prototype.indexOf = function(obj, start) {
for (var i = (start || 0); i < this.length; i++) {
if (this[i] == obj) {
return i;
}
}
}
}
// Defining addEvent function since Internet Explorer
does not support the official way of adding events
function addEvent(obj, type, fn) {
if (obj.addEventListener)
obj.addEventListener(type, fn, false);
else if (obj.attachEvent)
{
obj["e" + type + fn] = fn;
obj[type + fn] = function() {
obj["e" + type + fn](window.event);
}
obj.attachEvent("on" + type, obj[type + fn]);
}
}
function inputWatermark() {
if (inputs.length < 2 || inputs.length % 2 != 0) {
alert('Wrong usage - please read the source comments!');
}
for (i = 0; i < inputs.length; i++) {
if (i % 2 == 0 && (document.getElementById(inputs[i]) || document.getElementsByName(inputs[i])[0])) {
var cur = (document.getElementById(inputs[i])) ? (document.getElementById(inputs[i])) : (document.getElementsByName(inputs[i])[0]);
cur.value = inputs[i + 1];
addEvent(cur, "focus", onFocusHandler);
addEvent(cur, "blur", onBlurHandler);
}
}
}
function onFocusHandler() {
var inpname = this.id ? this.id: this.name;
if (this.value == '' || this.value == inputs[inputs.indexOf(inpname) + 1]) {
this.value = '';
}
}
function onBlurHandler() {
var inpname = this.id ? this.id: this.name;
if (this.value == '') {
this.value = inputs[inputs.indexOf(inpname) + 1];
}
}
addEvent(window, "load", inputWatermark);
</script>
<asp:TextBox ID="txtSearchTerms" runat="server" />
<asp:TextBox ID="txtLogin" runat="server" />