Set EmptyMessage for TextBox in Password Mode

Thread is closed for posting
1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 22 Oct 2008 Link to this post

    Requirements

    RadControls for ASP .NET AJAX version

    Q2 2008 and later
    .NET version

    2.0 and later
    Visual Studio version

    2005 and later
    Programming language Javascript
    Browser support

    all browsers supported by RadControls for ASP .NET AJAX


    Note:
    The same functionality can be accomplished using just a RadTextBox and a label element. The following Code Library project demonstrates this approach:

     

    PROJECT DESCRIPTION

    The functionality of setting EmptyMessage for TextBox in Password Mode is not built-in to the RadTextBox control.
    Unfortunately, it is not very easy to change the type of an <input> element (which is what the RadTextBox is rendered as) in javascript. However, there are some hacks to accomplish this which you can find on the web.
    The simple solution for this scenario is to add two RadTextBoxes to the form and switched them out. Here is the code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadTextBox.aspx.cs" Inherits="RadTextBox" %>   
       
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>   
       
    <!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>Untitled Page</title>   
    </head>   
    <body>   
        <form id="form1" runat="server">   
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />   
            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">   
                <script type="text/javascript">   
                    function OnFocus(sender, eventArgs) {   
                        $get('PasswordMask').style.display = 'none';   
                        $get('Password').style.display = 'inline';   
                        $find('<%= RadTextBox3.ClientID %>').focus();   
                    }   
                       
                    function OnBlur(sender, eventArgs) {   
                        if(sender.isEmpty()) {   
                            $get('PasswordMask').style.display = 'inline';   
                            $get('Password').style.display = 'none';   
                        }   
                    }   
                </script>          
            </telerik:RadScriptBlock>   
               
            <div>   
                <telerik:RadTextBox ID="RadTextBox1" runat="server"    
                    EmptyMessage="Username" />   
            </div>   
            <div id="PasswordMask">   
                <telerik:RadTextBox ID="RadTextBox2" runat="server"   
                    EmptyMessage="Password"   
                    ClientEvents-OnFocus="OnFocus" />   
            </div>   
            <div id="Password" style="display:none;">   
                <telerik:RadTextBox ID="RadTextBox3" runat="server"   
                    TextMode="Password"   
                    ClientEvents-OnBlur="OnBlur"  />   
            </div>   
               
        </form>   
    </body>   
    </html>   
Back to Top