Basically developers use watermark textbox to give a small hint to the user to input valid or meaningfull data. We found a lot of way to watermark a TextBox using Javascript but in this article or tutorial i will explain a very simple and easy way to implement watermark in textbox / textarea / multiline TextBox. A sample output is given below:
The main javascript method to implement watermark is:
01 | function WaterMarkFocus(txt, text) |
03 | if (txt.value == text) |
06 | txt.style.color = "black"; |
10 | function WaterMarkBlur(txt, text) |
15 | txt.style.color = "gray"; |
To implement the above sample output add an aspx page into your project then enter the below HTML markup:
01 | <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Watermark_TextBox.aspx.cs" Inherits="Watermark_TextBox" %> |
07 | <title>How to Implement Watermark TextBox</title> |
09 | <script language="javascript" type="text/javascript"> |
10 | function WaterMarkFocus(txt, text) |
12 | if (txt.value == text) |
15 | txt.style.color = "black"; |
19 | function WaterMarkBlur(txt, text) |
24 | txt.style.color = "gray"; |
31 | <form id="form1" runat="server"> |
33 | <asp:textbox ID="txtSearch" Text="Use ; as a separator" onfocus="WaterMarkFocus(this,'Use ; as a separator')" onblur="WaterMarkBlur(this,'Use ; as a separator')" runat="server" ForeColor="gray" ></asp:textbox> |
34 | <asp:Button runat="server" ID="cmdButton" Text="Search" /> |
No comments:
Post a Comment