Toggle label element in javascript

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 :D thank you

valli · Accepted Answer · 2009-12-18 10:12:16Z

2

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’;
}
}
                               }

answered Dec 18, 2009 at 10:12

valli

6,0072 gold badges22 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ant Over a year ago

One more thing .. I put the togglePassword function onblur and onfocus within password_field iput. Now when I click the empty field the password dissapears and works great, but when I click on the password itself(<label> element) .. nothing happens .. is it possible to fix that ?

valli Over a year ago

Try to put lable and password field both in a Div and give id for that. By giving like this you can toggle only field or total lable and field

ant Over a year ago

I just added same function to the label on click .. it works thank you .. just added .focus() on the password field

Quentin · Accepted Answer · 2009-12-18 09:55:15Z

1

One day I'll get round to writing up the details of this technique, but a working implementation has been sitting in my tmp directory for the last six months: http://dorward.me.uk/tmp/label-work/example.html

answered Dec 18, 2009 at 9:55

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

3 Comments

ant Over a year ago

You gave me this link before, just I couldn't find it , but I posted the previous question before hoping you'd answer, thank you first of all, second .. is this possible to do without jquery? Because I'm using prototype for this project and I just got in the middle of everything so I try to make everything which needs javascript by writing plain old javascript. thank you

Quentin Over a year ago

Of course. You just need to port the logic. (Which is the add the class to hide the label gets the focus, and onload if the field has a non-empty value, and remove it onblur but only if the field has an empty value)

ant Over a year ago

Well said .. that is exactly what I was trying to do, see my "script" attempt above, where did I go wrong. Maybe #1 error I tried to hide label on field focus .. instead of label focus function

Patrick · Accepted Answer · 2009-12-18 10:31:59Z

I have not quite understand the requirement, but you should verify in your function if you are doing a blur on focu action and reacting on this.

Perhaps something like that :

<script type="text/javascript">
function togglePassword(alwaysVisible, labelId, pwdId){
 var label=document.getElementById(labelId);
 if (alwaysVisible){
     label.style.display="";
 } else {
     var pwd=document.getElementById(pwdId);
     label.style.display= (pwd.value.length==0)?"":"none";
 }
} 
</script>

....

<form>
 <label  for="pwd" id="labelPwd">Type your password&nbsp;:&nbsp;</label>
 <input name="pwd" id="pwd" onfocus="togglePassword(true, 'labelPwd', 'pwd')" onblur="togglePassword(false    , 'labelPwd', 'pwd')" type="password">

 <input type="submit">                                                               
</form>

cRichter · Accepted Answer · 2009-12-18 09:52:59Z

-3

HI,

try to use a library like JQuery. they are really helpful in such simple tasks, and also can handle quite complex ones...

important point is: such a thing like hiding/showing is solved already hundred times. do not reinvent the wheel ;-)

answered Dec 18, 2009 at 9:52

cRichter

1,4217 silver badges7 bronze badges

1 Comment

ant Over a year ago

yes but what about password field, if I show password field value then the password will be masked, what about that?So I need to change the field type or do something more .. "simple"

Collectives™ on Stack Overflow

Toggle label element in javascript

4 Answers 4

3 Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related