Question

I have functions on blur and on focus that change a password text field to change from text to password type. What happens is that we deleted and recreate it, but the prototype functions don’t work afterwards. The code is as follows:

function focusPass(inputel,inputval) {
    if(inputel.value == inputval) {
        var newInput = document.createElement('input');
        newInput.setAttribute('type','password');    
        newInput.setAttribute('name',inputel.getAttribute('name'));
        newInput.setAttribute('id',inputel.getAttribute('id'));   
        inputel.parentNode.replaceChild(newInput,inputel);    
        setTimeout(function() { newInput.focus(); }, 10);
    }
}

function blurPass(inputel,inputval) {
    if(inputel.value == '') {
        var newInput = document.createElement('input');
        newInput.setAttribute('type','text');    
        newInput.setAttribute('name',inputel.getAttribute('name'));
        newInput.setAttribute('id',inputel.getAttribute('id')); 
        newInput.value = inputval;
        inputel.parentNode.replaceChild(newInput,inputel); 
    }
}

if ($('j_password') != undefined) {
    blurPass($('j_password'),'password');
    $('j_password').observe('blur', function(e) {  
        blurPass(this,'password');
    });
    $('j_password').observe('focus', function(e) {    
        focusPass(this,'password');
    });
}

I tried doing something like:

document.observe('blur', function(e, el) {  
    if (el = e.findElement('#j_password')) {    
        blurPass(this,'password'); 
    }
});

document.observe('focus', function(e, el) {  
    if (el = e.findElement('#j_password')) {    
        focusPass(this,'password');
    }
});

but that doesn’t seem to do anything. Can someone tell me how I would keep this function working? I would prefer not to have to set an attribute for onblur and onfocus, but if it’s not possible, will revert to that.

Thanks.

Answer 1

What I ended up doing was:

function focusPass(inputel,inputval) {
    if(inputel.value == inputval) {
        var ie = getIEVersion();
        if (ie > -1 && ie < 9) {
            var newInput = document.createElement('input');
            newInput.setAttribute('type','password');    
            newInput.setAttribute('name',inputel.getAttribute('name'));
            newInput.setAttribute('id',inputel.getAttribute('id'));  
            new Insertion.After(inputel, newInput);
            inputel.remove();
            setTimeout(function() { newInput.focus(); }, 10);
        } else {
            inputel.setAttribute('type','password');
            inputel.value = "";
                inputel.focus();
        }
    }
}

function blurPass(inputel,inputval) {
    if(inputel.value == '') {
        var ie = getIEVersion();
        if (ie > -1 && ie < 9) {
            var newInput = document.createElement('input');
            newInput.setAttribute('type','text');    
            newInput.setAttribute('name',inputel.getAttribute('name'));
            newInput.setAttribute('id',inputel.getAttribute('id')); 
            newInput.value = inputval;
            new Insertion.After(inputel, newInput);
            inputel.remove();
        } else {
            inputel.setAttribute('type','text');
            inputel.value = inputval;
        }
    }
}

It doesn’t fix the IE7 and IE8 issues, but at least it works on all other major browsers as they support changing the input type.