Follow up question about input focus and blur

Question

Hi all, I already asked a question today : This one

Now I have a code that works, but works only in FF(fully) and partially in IEs(7 and 8).

function replaceT(obj){
     var newO=document.createElement('input');
     newO.className = obj.className;
     newO.style.width = '118px';
     newO.style.height = '17px';
     newO.style.color = '#666';
     newO.setAttribute('maxlength','30');
     newO.setAttribute('type','password');
     newO.setAttribute('onblur','this.value=\'Password\'; this.type=\'text\'');
     newO.setAttribute('onfocus','this.value=\'\'; this.type=\'password\'');
     newO.setAttribute('tabindex','2');
     newO.setAttribute('value','');
     newO.setAttribute('id','password_property_input');
     newO.setAttribute('name',obj.getAttribute('name'));
     obj.parentNode.replaceChild(newO,obj);
     newO.focus();
}

In firefox everything works perfect, I call this function on focus so my old type password input becomes type text input.

Now when I click outside of this input(onblur) I get the field type changes to text again and the value restores to Password. And if the field is clicked again(onfocus) my text type input again becomes password and the value is back to ''.

This works perfectly in FF, but none of this works in IE, when I say none I mean onblur and onfocus. The first change from text to password input works. Thank you for any answers

I found even better solution, but it also doesn't work in IE :

Inside window.load function put :

applyPasswordType(document.getElementById('password_property_input'), 'Password', 'text');

And the function itself ..

function applyPasswordType(elem, val, typ) {
      elem.value = val;
      elem.type = typ;
      elem.onfocus = function() {
        if(this.value == val) {
          this.style.color = '';
          this.type = 'password'; //If in focus, input type will be 'password'
          this.value = '';
        }
      }

      elem.onblur = function() {
         if(this.value == '') {
           this.value = val;
           this.type = 'text'; //On blur, input type will be 'text' in order to show value
         }
       }
     }

I'm still trying to figure out how to fix this with addeventlistener ..

Answer 1

setAttribute is broken in IE, don't use it.

Use properties directly:

foo.onevent = function () { ... }

Better yet, use addEventListener/attachEvent

You might also find that IE can't change the type of an existing input. If so, you'll have to create a new input and replace the existing one.