How to Set and Change Watermark at Runtime Using JavaScript

Introduction

 

I encountered the problem in my project of how to set and change a watermark during runtime in a single "text box" on the change event of a dropdown. I found various solutions on the internet but then I developed the following solution.

 

JavaScript code

$(document).ready(function()
{
    $("#textBoxId").val("Enter Name");
    ChangeWatermark('textBoxId', 'Enter Name');
});

function ChangeWatermark(inputId, watermarkText)
{
    $("#" + inputId).unbind("focus");
    $("#" + inputId).unbind("blur");
    $("#" + inputId).bind("focus", function()
    {
        if (this.value == watermarkText) this.value = '';
    });
    $("#" + inputId).bind("blur", function()
    {
        if (this.value == '') this.value = watermarkText;
    });
}

function ChangeWatermarkBasedOnDropdownChange()
{
    switch ($("#DdlSelectSearch option[value='" + $("#DdlSelectSearch").val() + "']").text())
    {
        case "Name":
            $("#textBoxId").val("Enter Name");
            ChangeWatermark('textBoxId', 'Enter Name');
            break;
        case "Zip":
            $("#textBoxId").val("Enter Zip");
            ChangeWatermark('textBoxId', 'Enter Zip');
            break;
        case "City":
            $("#textBoxId").val("Enter City");
            ChangeWatermark('textBoxId', 'Enter City');
            break;
        case "MC Id":
            $("#textBoxId").val("Enter MC Id");
            ChangeWatermark('textBoxId', 'Enter MC Id');
            break;
        default:
    }
}

HTML Code

<div class="row"> <span style="width: 50px;" class="normalGray">By:</span>
        <asp:DropDownList ID="DdlSelectSearch" runat="server" Style="width: 63px; : 12px;" onchange="ChangeWatermarkBasedOnDropdownChange(); return false" CssClass="textBox floatLeft" ClientIDMode="Static" TabIndex="101">
            <asp:ListItem Value="ZipCode">Zip</asp:ListItem>
            <asp:ListItem Value="City">City</asp:ListItem>
            <asp:ListItem Value="Name" selected="selected">Name</asp:ListItem>
            <asp:ListItem Value="Id">MC Id</asp:ListItem>
        </asp:DropDownList>
        <input type="text" name="zip1" id="textBoxId" runat="server" maxlength="50" style="width: 93px;" class="textBox floatLeft marginLr5" clientidmode="Static" tabindex="102" />
     </div>