RadTextBox in Password mode, Icon in Internet Explorer

[Keith]

I am trying to use a RadTextBox with TextMode="Password".

When I was testing it in Internet Explorer version 11 under Windows 7, there is a weird icon that shows up when typing something in the RadTextBox.

Attached is a screenshot with the icon circled in RED.

When you click on the icon and hold the mouse button, it shows the text of the password.

I have tested on Chrome and Firefox and no icon appears in the RadTextBox.

Is there any way to prevent that icon from appearing?

Please help!

Sincerely,

Keith Jackson

 

[Viktor Tachev]

Hi Keith,

This button is specific to Internet Explorer only. The same applies also to the clear button that is displayed in input elements.

In order to remove the button you can use a bit of CSS. You need to ensure that the -ms-reveal pseudo-element is not visible. Please check out the following stackoverflow article that describes the approach in more detail.

• http://stackoverflow.com/questions/17000562/removing-clear-and-reveal-password-icons-from-ie10

Regards,
Viktor Tachev
Telerik by Progress

[Keith]

Thank Viktor!

The funny thing is that this has never come up in Internet Explorer when using an ASP TextBox in Password mode.  It only shows up with RadTextBox.  What makes the RadTextBox different than the ASP TextBox?

Sincerely,

Keith Jackson

[Viktor Tachev]

Hi Keith,

This behavior is not related to the RadTextBox control. The icon is entirely Internet Explorer feature. The browser adds this to any input element with type password.

You can test the behavior by adding a regular input element and TextBox control with their type property set to password. Check out the following video as illustration.

• http://screencast.com/t/a5jHlgiqSFiM

In the code snippet below you can see the code I used for testing.

Input element: <input id="input1" type="password" />
<br />
ASP.NET TextBox: <asp:TextBox ID="TextBox1" runat="server" TextMode="Password" />
<br />
RadTextBox: <telerik:RadTextBox runat="server" ID="RadTextBox1" TextMode="Password"></telerik:RadTextBox>

Regards,
Viktor Tachev
Telerik by Progress

[Keith]

I was using a regular TextBox with TextMode="Password" on my login page before I changed it to a RadTextBox and never saw that icon show up.  I am always testing in Internet Explorer since the company I work for mostly uses Internet Explorer.  I do test in Chrome and Firefox too.  I did see the X display in a regular TextBox in Internet Explorer but I am not concerned with that.

I changed to RadTextBox since it is more mobile friendly and that I am working on changing our web site to be more mobile friendly.

Anyways, the link you provided helped provide a way to prevent that icon from appearing.

Thanks!

Sincerely,

Keith Jackson

[Viktor Tachev]

Hi Keith,

I am glad that the suggested approach is working for you. Let me know if you need further assistance.

Regards,
Viktor Tachev
Telerik by Progress

[SSirica]

I have the opposite problem...I would like a show password button to show up in Chrome.  I found this https://www.telerik.com/support/kb/aspnet-ajax/textbox/details/showpassword-button-for-radtextbox-with-textmode-password but the eye doesn't display in the correct location.  It shows up in the middle of the browser page floating right.  

[Peter Milchev]

Hello SSirica,

The issue is that the Classic render mode is used. With that said, there are two options to fix that: 

1) Set all controls to render mode Lightweight

2) Set position: relative for the wrapper of the input:

.riSingle.RadInput{
    position:relative
}

Regards,
Peter Milchev
Progress Telerik

[SSirica]

That worked perfect.  Thank you!