Set or Display Watermark Text for ASP.Net TextBox, Password and MultiLine TextArea using jQuery in ASP.Net with demo and Example codes

Category > ASP.NET || Published on : Wednesday, January 17, 2018 || Views: 9422 || Display Watermark Text for ASP.Net TextBox Watermark Text how to add watermark in asp.net page watermark in asp.net textbox


Introduction

In the this article we are going to learn and understand How to set the watermark text to the ASP.NET textbox, Password and MultiLine TextArea using jQuery Plugin

Description

In previous post I have explained jQuery: Call function when CheckBox is checked or unchecked, How to Implement Reorder List (Drag and Drop) using jQuery in ASP.Net, How To Export HTML Table To Excel Using jQuery Plugin, How to Display Decimal Numbers As Money using Transact-SQL, How to Access Data From Ordered Dictionary using C#, How to use Regular Expression (Regex) to accept only Alphanumeric (Alphabets and Numbers) in TextBox in ASP.Net using RegularExpression Validator, and many more articles.

Now I will explain How to Set or Display Watermark Text for ASP.Net TextBox, Password and MultiLine TextArea using jQuery in ASP.Net with demo and Example codes

So follow the steps to learn Set or Display Watermark Text for ASP.Net TextBox, Password and MultiLine TextArea using jQuery in ASP.Net with demo and Example codes

In the this article we are going to learn and understand How to set the watermark text to the ASP.NET textbox, Password and MultiLine TextArea using jQuery Plugin

First create three ASP.Net textboxes with different TextMode Property. Set first textbox with SingleLine, second  textbox with Multiline and third textbox with password

Source Codes for HTML Markup

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="c-sharp-code.aspx.vb" Inherits="c_sharp_code" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Display Watermark Text in a Password TextBox Using jQuery In Asp.Net - www.sourcecodehub.com</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            UserName:
            <asp:TextBox ID="tbUser" runat="server" ToolTip="Enter UserName"></asp:TextBox><br />
            Password:
            <asp:TextBox ID="tbPassword" runat="server" TextMode="Password" ToolTip="Enter Password"></asp:TextBox><br />
            Address:
            <asp:TextBox ID="tbAddress" runat="server" TextMode="MultiLine" ToolTip="Enter Address"></asp:TextBox>

        </div>
    </form>
</body>
</html>


Now We have to apply Watermark to ASP.NET Textboxes so we can Display Watermark Text in a Password TextBox Using jQuery for that I have coded the jQuery Watermark plugin to apply Watermark to SingleLine, Multline and Password ASP.Net TextBoxes. you can download Watermark plugin from "Download Source Code" button at the bottom of this page. The code snippet will be like below

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="WaterMark.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=tbUser], [id*=tbPassword], [id*=tbAddress]").WaterMark();
 
        });
</script>

Complete Source Codes for Watermark Text in a Password TextBox Using jQuery In Asp.Net

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="c-sharp-code.aspx.vb" Inherits="c_sharp_code" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Display Watermark Text in a Password TextBox Using jQuery In Asp.Net - www.sourcecodehub.com</title>

    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="WaterMark.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=tbUser], [id*=tbPassword], [id*=tbAddress]").WaterMark();
 
        });
</script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            UserName:
            <asp:TextBox ID="tbUser" runat="server" ToolTip="Enter UserName"></asp:TextBox><br />
            Password:
            <asp:TextBox ID="tbPassword" runat="server" TextMode="Password" ToolTip="Enter Password"></asp:TextBox><br />
            Address:
            <asp:TextBox ID="tbAddress" runat="server" TextMode="MultiLine" ToolTip="Enter Address"></asp:TextBox>

        </div>
    </form>
</body>
</html>

 

Conclusion:

So, In this tutorial we have learned, Set or Display Watermark Text for ASP.Net TextBox, Password and MultiLine TextArea using jQuery in ASP.Net with demo and Example codes

Download Source Codes