CODEWITHSUNDEEP
phphtmlcssinternet-explorer-8
Manigandan Arjunan
Manigandan Arjunan

Reputation: 2265

IE8 Password field showing entered value instead of showing asterisks

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

Upvotes: 0

Views: 603

Answers (1)

luke2012
luke2012

Reputation: 1734

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.

Upvotes: 2

Related Questions