Input type password text on IE 8

Question

I'm working on this website

The problem I have is on the input of the password: enter image description here

When you click on it on IE9 and other browsers like Chrome and mozilla, the text changes so you can enter the password.

But that doesn't happen on IE8, if you click over it the text just stays there always, so I can't enter a pass.

This is my input code:

<input class="login_modal password" type="text" value="Contraseña" onfocus="this.type='password';this.value=''" onblur="if(this.value == ''){this.type='text';this.value='Contraseña';}" />

Any ideas to make it work cross-browser and Ie8 also?

Not abusing `value` as a replacement for `` in the first place would be a good start. — Quentin, May 21 '13 at 11:57
check this previously answered question http://stackoverflow.com/questions/13415151/jquery-input-placeholder-for-type-password-in-ie8 — Rinku, May 21 '13 at 12:02
I think you should use jquery more, defining events not in input markup but in javascript block — SmasherHell, May 21 '13 at 12:02
Older IE don’t allow changing the `type` of input fields (as this property was defined as readonly in an early DOM specification). You can only create a new field, and replace the existing one with that. — CBroe, May 21 '13 at 12:06

Ankur Verma · Answer 1 · 2013-08-22T08:49:45.287

2

You can use jquery like :

var defaultVal = 'Contraseña';


$('.password').on('focus', function(){
     var $this = $(this);
     var valOfThisBox = $this.val();

     if(valOfThisBox === '' ){
        this.val(defaultVal);
     }else{
        this.attr('type','password').val('');
     }
});

edited Aug 22 '13 at 08:49

answered May 21 '13 at 12:03

Ankur Verma

5,793
12
57
93

I changed it to this, but it just keeps the text and doesn't change to type password on focus... you can see it on the link – codek May 21 '13 at 12:17
`Uncaught TypeError: Object # has no method 'val' ` – codek May 21 '13 at 12:26
try using older versions of jquery, like 1.7 or 1.8, I don't have IE 8, running in Chrome is not making any issue.... – Ankur Verma May 21 '13 at 12:32
I'm testing it right now in chrome, if you load the page the pass is blank and if I click and type, it just shows the password, so no `type="password"` there – codek May 21 '13 at 12:39
You removed the code...right? – Ankur Verma May 21 '13 at 12:42
changed the input to: `` – codek May 21 '13 at 12:44

score 0 · Answer 2 · answered May 21 '13 at 12:02

0

You can use the css selector focus:

loginModal password:focus, loginModalPassword.focus { loginmodalpassword.type='password' }

answered May 21 '13 at 12:02

score 0 · Answer 3 · answered May 21 '13 at 12:04

I wrote this function using jQuery some time ago

usage: _describeInput($("#idOfYourInputField"));

alternative: _describeInput($("input[name=NameOfYourInputField]"));

You may want to change the colors being applied, this one was a quick draft for dark backgrounded websites. Works pretty well for me tho.

function _describeInput(_field=false)
{
if (!$(_field)) { return false; }

$(_field).unbind();

$(_field).focus(function(){
    $(this).val(($(this).val()==$(this).attr("description"))?"":$(this).val());
    $(this).css({"color":"white"});
});

$(_field).focusout(function(){
    $(this).css({"color":(($(this).val()==$(this).attr("description"))?"gray":"white")});           
    $(this).val(($(this).val()=="")?$(this).attr("description"):$(this).val());
});

$(_field).css({"color":"gray"}).attr("description",$(_field).val());
}

Input type password text on IE 8

3 Answers3