CODEWITHSUNDEEP
asp.nethtmlcssajax
puneetverma0711
puneetverma0711

Reputation: 145

ajax textbox watermark

I've developed one page where i need to enter email and password ,and before typing it should display "enter your email" text in one text box and "enter your password" text in another text box.

Below is the code to perform above operation.

<html>
<head>
<title>lksdjflk</title>
<style>
    .unwatermarked { 
        height:18px;
        width:148px;
 }

     .watermarked { 
        height:20px;
        width:150px;
        padding:2px 0 0 2px;
        border:1px solid #BEBEBE;
        background-color:#F0F8FF;
        color:Gray;
}
</style>
</head>
</html>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server" CssClass="unwatermarked"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server"  
    Enabled="true" TargetControlID="TextBox1"  WatermarkCssClass="watermarked"    
    WatermarkText="email-Id">
</asp:TextBoxWatermarkExtender>
</asp:Content>

If anyone knows any solution please let me know as soon possible.

Thanks, Avnish

Upvotes: 0

Views: 14073

Answers (4)

ricardo130
ricardo130

Reputation: 165

Your code it's perfect, the only mistake it's here:

"asp:TextBoxWatermarkExtender" it should be: "ajaxToolkit:TextBoxWatermarkExtender"

Of course you have to open the Nuget Package Manager and install AjaxControllToolkit in your project.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TextBoxWatermark.aspx.cs" Inherits="ControlesAjax2.TextBoxWatermark" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .unwatermarked {
            height: 18px;
            width: 148px;
        }

        .watermarked {
            height: 20px;
            width: 150px;
            padding: 2px 0 0 2px;
            border: 1px solid #BEBEBE;
            background-color: #F0F8FF;
            color: Gray;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server"
                Enabled="true" TargetControlID="TextBox1" WatermarkCssClass="watermarked"
                WatermarkText="email-Id"></ajaxToolkit:TextBoxWatermarkExtender>
        </div>
    </form>
</body>
</html>

Source: http://www.ajaxcontroltoolkit.net/TextBoxWatermark/TextBoxWatermark.aspx

Upvotes: 0

Ken Clark
Ken Clark

Reputation: 2530

In order to use AjaxControlToolkit you first need to register assembly in web.config or in individual page. For you case add

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="act" %>

to the top of your page below Page directive and use TextBoxWatermarkExtender as:

<asp:TextBox ID="TextBox1" runat="server" CssClass="unwatermarked"></asp:TextBox>
        <act:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server"
            Enabled="true" TargetControlID="TextBox1" WatermarkCssClass="watermarked" WatermarkText="Enter your email id">
        </act:TextBoxWatermarkExtender>
        <br />
        <br />
        <asp:TextBox ID="TextBox2" runat="server" CssClass="unwatermarked"></asp:TextBox>
        <act:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server"
            Enabled="true" TargetControlID="TextBox2" WatermarkCssClass="watermarked" WatermarkText="Enter your password">
        </act:TextBoxWatermarkExtender>

Upvotes: 0

Rick Calder
Rick Calder

Reputation: 18705

you can use the Placeholder for this, be warned not all browsers (earlier browsers) will support it, but it works in most common browsers. Visual studio will also report it as an error in the code lol.

<asp:TextBox ID="TextBox1" runat="server" Placeholder="enter some text here" CssClass="unwatermarked"></asp:TextBox>

You could also enter the text as an actual value then use jQuery to select it all on focus

    <asp:TextBox ID="TextBox1" runat="server" value="enter some text here" CssClass="unwatermarked"></asp:TextBox>

$("#TextBox1").on("click",function() {
    $(this).select();
});

Upvotes: 3

Ranjith
Ranjith

Reputation: 2819

Try this one.

<asp:TextBox ID="passwordId" runat="server"
  placeholder="Please enter UserName"></asp:TextBox>

<asp:TextBox ID="usernameId" runat="server"
  placeholder="Please enter password"></asp:TextBox>

Upvotes: 5

Related Questions