Add WaterMark to TextBox in Asp.Net: The simple way!

Sunday, 11 October 2009 17:17 by myro

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

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags:   ,
Categories:   .NET | Web
Actions:   Bookmark and Share | Permalink | Comments (0) | Comment RSSRSS comment feed