How to Set and Change Watermark at Runtime Using JavaScript

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

  1. $(document).ready(function()  
  2. {  
  3.     $("#textBoxId").val("Enter Name");  
  4.     ChangeWatermark('textBoxId''Enter Name');  
  5. });  
  6.   
  7. function ChangeWatermark(inputId, watermarkText)  
  8. {  
  9.     $("#" + inputId).unbind("focus");  
  10.     $("#" + inputId).unbind("blur");  
  11.     $("#" + inputId).bind("focus", function()  
  12.     {  
  13.         if (this.value == watermarkText) this.value = '';  
  14.     });  
  15.     $("#" + inputId).bind("blur", function()  
  16.     {  
  17.         if (this.value == ''this.value = watermarkText;  
  18.     });  
  19. }  
  20.   
  21. function ChangeWatermarkBasedOnDropdownChange()  
  22. {  
  23.     switch ($("#DdlSelectSearch option[value='" + $("#DdlSelectSearch").val() + "']").text())  
  24.     {  
  25.         case "Name":  
  26.             $("#textBoxId").val("Enter Name");  
  27.             ChangeWatermark('textBoxId''Enter Name');  
  28.             break;  
  29.         case "Zip":  
  30.             $("#textBoxId").val("Enter Zip");  
  31.             ChangeWatermark('textBoxId''Enter Zip');  
  32.             break;  
  33.         case "City":  
  34.             $("#textBoxId").val("Enter City");  
  35.             ChangeWatermark('textBoxId''Enter City');  
  36.             break;  
  37.         case "MC Id":  
  38.             $("#textBoxId").val("Enter MC Id");  
  39.             ChangeWatermark('textBoxId''Enter MC Id');  
  40.             break;  
  41.         default:  
  42.     }  
  43. }  
HTML Code
  1. <div class="row"> <span style="width: 50px;" class="normalGray">By:</span>  
  2.     <asp:DropDownList ID="DdlSelectSearch" runat="server" Style="width: 63px; : 12px;" onchange="ChangeWatermarkBasedOnDropdownChange(); return false" CssClass="textBox floatLeft" ClientIDMode="Static" TabIndex="101">  
  3.         <asp:ListItem Value="ZipCode">Zip</asp:ListItem>  
  4.         <asp:ListItem Value="City">City</asp:ListItem>  
  5.         <asp:ListItem Value="Name" selected="selected">Name</asp:ListItem>  
  6.         <asp:ListItem Value="Id">MC Id</asp:ListItem>  
  7.     </asp:DropDownList>  
  8.     <input type="text" name="zip1" id="textBoxId" runat="server" maxlength="50" style="width: 93px;" class="textBox floatLeft marginLr5" clientidmode="Static" tabindex="102" />   
  9.  </div>   
jquery1.gif
jquery2.gif

 

Up Next
    Ebook Download
    View all
    Learn
    View all