[Solved] How to add watermark in textbox in asp.net using ajax

Introduction : Today I am going to show you how to add water in textbox in asp.net webform using ajax.This is very simple to implement watermark in asp.net textbox. Let's see how we can done this.


                      
Ajextoolkit,TextBoxWatermarkExtender,Asp.net,C#,Watermark


Steps:
1.Add one asp.net webform.
2.Register the AjexToolKit assembley at the top of webform
3.Add the script in <head> section.
4.Add ToolKitScriptManager.
5.Take one textbox. 

Let's have a look

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="watermark-textbox.aspx.cs" Inherits="watermark-textbox" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>how to add watermark in textbox in asp.net using ajax</title>
    <script type="text/javascript">
        function WaterMark(txtName, event) {
            var defaultText = "Enter Username Here";
            // Condition to check textbox length and event type
            if (txtName.value.length == 0 & event.type == "blur") {
                //if condition true then setting text color and default text in textbox
                txtName.style.color = "Gray";
                txtName.value = defaultText;
            }
            // Condition to check textbox value and event type
            if (txtName.value == defaultText & event.type == "focus") {
                txtName.style.color = "black";
                txtName.value = "";
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ajax:ToolkitScriptManager ID="k1" runat="server"></ajax:ToolkitScriptManager>
    <div>
        <b>UserName:</b>
        <asp:TextBox ID="txtUserName" runat="server" Text="Enter Username Here" ForeColor="Gray" onblur="WaterMark(this, event);" onfocus="WaterMark(this, event);" />
    </div>      
    </form>
</body>
</html>



TAG:Ajextoolkit,TextBoxWatermarkExtender,Asp.net,C#,Watermark

Post a Comment

Post a Comment (0)

Previous Post Next Post