Set EmptyMessage for TextBox in Password Mode

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

    Posted 22 Oct 2008 Link to this post


    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

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



    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" "">   
    <html xmlns="">   
    <head runat="server">   
        <title>Untitled Page</title>   
        <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';   
                <telerik:RadTextBox ID="RadTextBox1" runat="server"    
                    EmptyMessage="Username" />   
            <div id="PasswordMask">   
                <telerik:RadTextBox ID="RadTextBox2" runat="server"   
                    ClientEvents-OnFocus="OnFocus" />   
            <div id="Password" style="display:none;">   
                <telerik:RadTextBox ID="RadTextBox3" runat="server"   
                    ClientEvents-OnBlur="OnBlur"  />   
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.