Question

Hello everybody I’ve recently asked this question and I’ve given up with the ‘replace input idea’. Instead I’ve decided to try another approach..

I’ve made my password field background transparent and I placed <label> element “behind” the password input, so that it appears to be part of the password field. Now I wrote a standard function for toggling element like this :

function togglePassword(obj) {
                    var el = document.getElementById(obj);
                    if ( el.style.display != 'none' ) {
                        el.style.display = 'none';
                    }
                    else {
                        el.style.display = '';
                    }
                }

I trigger this function onforus and onblur from password field so that label disappears when the password field is focused but I have problems with onblur, because after I type password and hit TAB on the which takes me to login submit button then the <label> element appears with password value again and its mixed with typed password.
Here is the image of that, so I tried to come up with something new.

function togglePassword(obj) {
                var el = document.getElementById(obj);
                        var input_el = document.getElementById('password_field');
                   if(input_el.value.length > 0)
                            {
                                el.style.display = 'none';
                            }
                           else {
                              if ( el.style.display != 'none' ) {
                        el.style.display = 'none';
                        }
                        else {
                            el.style.display = '';
                        }
                    }
                               }

Unfortunately, this code doesn’t work .. can someone point to me where did I made mistake? So this second code should check whether password field is emtpy or not, if its not empty then continue to toogle if it is don’t toggle just hide the password value. Help 😀 thank you

Answer 1

Try this it will work

function togglePassword(obj) { 
var el = document.getElementById(obj); 
var input_el = document.getElementById('password_field'); 
if((input_el.style.display == ‘none’) || ((input_el.style.display=='') && (input_el.offsetWidth==0))){
el.style.display = 'block';
} else {
el.style.display = ‘none’;
}
}
                               }