Please visit my new Web Site https://coderstechzone.com
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:
function WaterMarkFocus(txt, text) { if (txt.value == text) { txt.value = ""; txt.style.color = "black"; } } function WaterMarkBlur(txt, text) { if (txt.value == "") { txt.value = text; txt.style.color = "gray"; } }To implement the above sample output add an aspx page into your project then enter the below HTML markup:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Watermark_TextBox.aspx.cs" Inherits="Watermark_TextBox" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>How to Implement Watermark TextBox</title> <script language="javascript" type="text/javascript"> function WaterMarkFocus(txt, text) { if (txt.value == text) { txt.value = ""; txt.style.color = "black"; } } function WaterMarkBlur(txt, text) { if (txt.value == "") { txt.value = text; txt.style.color = "gray"; } } </script> </head> <body> <form id="form1" runat="server"> <div> <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> <asp:Button runat="server" ID="cmdButton" Text="Search" /> </div> </form> </body> </html>
Hope now one can implement watermark easily. You can apply the above technique for multiline TextBox TextArea as well.
0 comments:
I WOULD BE DELIGHTED TO HEAR FROM YOU