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>