IE8 Password field showing entered value instead of showing asterisks

Question

In my site the password field is showing the entered value instead of showing asterisks symbol. This works fine with all the other browsers. IE7, and IE9 works as well too. Only in IE8 i'm not getting it.. Any help will be greatly appreciated.

For ref: just check the site and click on sign in the login box will appear you can check the issue with that password field.

<input type="password" name="password" id="password" value="Password" 
onblur="if(this.value == '') { this.style.color='#bbb'; this.value='Password'; this.type='text'} 
else {this.type='password';}" 
onfocus="if (this.value == 'Password') {this.style.color='#000'; this.value=''; this.type='password'} else {this.type='password';}" style="color: rgb(0, 0, 0);">

@BenFortune i didnt want you to signin, if u just click on that button a popup will appear there you can see the issue — Manigandan Arjunan, Sep 02 '13 at 10:17
@DipeshParmar — `this` is a very fundamental part of JavaScript. IE does support it. — Quentin, Sep 02 '13 at 10:20
@ManigandanArjunan Why are you setting this.type on blur and focus? Directly set type="password" in your tag — Sabari, Sep 02 '13 at 10:21
@thirtydot when start type something in that field the input type will get changed to type="password" — Manigandan Arjunan, Sep 02 '13 at 10:24
@MrLister: On the actual site, there's no `type="password"` in the HTML. The funky inline JavaScript may or may not add it. — thirtydot, Sep 02 '13 at 10:25
changing the `type` of an `input` is not portable across browsers. You should find a better way to do this. — Barmar, Sep 02 '13 at 10:25
@Quentin well i just pasted error which i got in IE status bar....even i know IE support that....i just forget to mention that IE shows that error.. — Dipesh Parmar, Sep 02 '13 at 10:27
http://stackoverflow.com/questions/1544317/change-type-of-input-field-with-jquery?lq=1 — Barmar, Sep 02 '13 at 10:27
@ManigandanArjunan: Your current JavaScript is not robust and is likely to fail or behave undesirably in a range of circumstances. Use a real placeholder script instead: https://github.com/mathiasbynens/jquery-placeholder — thirtydot, Sep 02 '13 at 10:28

score 2 · Accepted Answer · answered Sep 02 '13 at 10:37

I'm guessing here because I don't want to go through all your code but I imagine you are replacing a <input type="text" /> with <input type="password" /> when the user has focus on the input. I don't think that is the best cross browser solution.

If you want to support older browsers you will need to use a javascript solution as the HTML5 placeholder value won't work on all browsers.

A good solution is using the <label> tag positioned under the input instead of faking it. For a good example see: http://blog.stannard.net.au/2011/01/07/creating-a-form-with-labels-inside-text-fields-using-jquery/

The advantages of this solution includes cross browser compatibility, accessibility and semantic markup.

IE8 Password field showing entered value instead of showing asterisks

1 Answers1