| 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> |