IE8密码字段显示输入的值而不是显示星号

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);">

Answer 1

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.