0

I current have a login box with the text ID and PASSWORD displayed inside the textbox. When a user clicks on it, it disappears and allows the user to type in their password. However, I set textmode of the Password text box to "PASSWORD" and it seems to not be working for the password box anymore. Anyone have any clues?

HTML

    <input name="Login1$UserName" type="text" value="NUID" id="Login1_UserName" class="txtbox" onfocus="if(this.value==this.defaultValue) {this.value='';$(this).css('color','black');}" onblur="if(this.value=='') {this.value=this.defaultValue;$(this).css('color','rgb(173,180,195)');}" style="width:240px;" />
    <span id="Login1_UserNameRequired" title="User Name is required." style="color:#DA6426;visibility:hidden;">*</span>
  </td>
</tr>
<tr>
  <td>
    <input name="Login1$Password" type="password" id="Login1_Password" style="width:240px;" />
    <span id="Login1_PasswordRequired" title="Password is required." style="color:#DA6426;visibility:hidden;">*</span>
  </td>
</tr>
<tr>
  <td align="center" style="color:#DA6426;">
  </td>
</tr>
<tr>
  <td align="right">
     <input type="submit" name="Login1$LoginButton" value="Log In" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Login1$LoginButton&quot;, &quot;&quot;, true, &quot;Login1&quot;, &quot;&quot;, false, false))" id="Login1_LoginButton" style="font-family:Arial;height:22px;" />
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
user1512593
  • 381
  • 3
  • 6
  • 16
  • What does not *seem to* be not working any more? Have you tried the `placeholder` attribute? – Bergi Aug 03 '12 at 23:36
  • The focus. The Password box is always blank. Until you type when it displays the little circles as letters as it is suppose to. But it does not display the text "Password" in the textbox. – user1512593 Aug 03 '12 at 23:56
  • It seems you set no defaultValue (or I couldn't identify that in the asp code), as the browser should show at least the 8 circles. – Bergi Aug 04 '12 at 00:10
  • exact duplicate of [Set default value of a password input so it can be read](http://stackoverflow.com/questions/4797166/set-default-value-of-a-password-input-so-it-can-be-read) – Bergi Aug 04 '12 at 00:10
  • I am not so sure that the default html input can be considered the same as ASP controls – user1512593 Aug 04 '12 at 00:35
  • Could you edit your question to show us the generated HTML only? – Bergi Aug 04 '12 at 00:37
  • Sorry, how do you go upon doing that? – user1512593 Aug 04 '12 at 00:48
  • Huh? Just open the site in your browser, view source and copy it. – Bergi Aug 04 '12 at 01:34
  • stackoverflow isnt allowing me to do it because it appears to not be formatted correctly. It seems to adding // // // into my code randomly in the preview. I could post specific stuff probably. – user1512593 Aug 04 '12 at 01:49
  • We need only the html of that input box of course. And no, SO does not add any slashes - just indent it with four spaces. – Bergi Aug 04 '12 at 01:52
  • Alright. I got it. Check the edit. – user1512593 Aug 04 '12 at 02:19
  • Thanks. As you can see, the `#Login1_Password` box has no `value` - so why should it display "Password" (or at least "********")? – Bergi Aug 04 '12 at 11:26

2 Answers2

0

Not very familiar with asp, but with javascript you cannot change the type of an input (for security reasons); if you want the effect of having visible text in the password input, you have to physically hide the password and display another input that swaps onfocus.

EDIT:

Here is a link to the password swapping function I created a while back that is part of my js library. For anyone else looking I realize that it does not use jQuery, but I created before I used jQuery and haven't had time or reason to update it.

http://jsfiddle.net/thundercracker/DXLe3/1/

EDIT:

I am pretty sure it is completely self contained. Just need to call it on window.onload with the IDs of the two inputs.

Also need the eventListener function at the bottom with it as well.

Greg Rozmarynowycz
  • 2,037
  • 17
  • 20
  • So something like having a label over it and have it dissapear on focus? – user1512593 Aug 03 '12 at 23:59
  • Surely you can. Only IE does not support it. – Bergi Aug 04 '12 at 00:00
  • You could have a label on top, or another regular input that disappears when it is clicked, then reappears if the password field is blurred and is empty. Another option is to user a background image of the text "Password" and have that disappear the same way. I'll post a jsfiddle of my password swapping script in a moment. – Greg Rozmarynowycz Aug 04 '12 at 00:24
  • @Bergi That might just be a problem considering IE is still unfortunately at least 40% of the market and that this guys app is written in Microsofts language and would therefore likely be used in IE... – Greg Rozmarynowycz Aug 04 '12 at 00:49
  • @Greg is correct. Targeted towards IE sadly. Took a look at your text and tried it. Not working but I think it might because it is done through the asp:login on my side. Instead of just two text boxes. – user1512593 Aug 04 '12 at 01:18
  • Ya sorry I'm not sure I can be of much help adapting to asp; don't really know too much about the specifics of it. If you have any more issues I can probably try to help. – Greg Rozmarynowycz Aug 04 '12 at 02:31
  • No problem. The only problem with your code was that instead of disappearing when I clicked, It just started letting my type into the fauxpwd text box in addition the the word "Password" – user1512593 Aug 06 '12 at 16:52
  • When you tried to apply to your app? If it was doing that, it just wasn't working; maybe you could see if it was generating any errors in the console? – Greg Rozmarynowycz Aug 06 '12 at 17:19
0

This can be done using the onfocus and onblur events in javascript and changing the type attribute of the input element. I have, however, run into issues on some browsers not changing the field back to a password input. Here's an article that does it with asp.net controls complete with validators.

http://planetofcoders.com/watermark-property-password-textbox-web-page/

AceCorban
  • 2,023
  • 1
  • 15
  • 15