Activer ou désactiver l'élément d'étiquette en javascript

Question

Bonjour à tous, J'ai récemment demandé this question et j'ai abandonné l'idée 'remplacer l'idée'. J'ai décidé d'essayer une autre approche ..

J'ai rendu l'arrière-plan de mon champ de mot de passe transparent et j'ai placé l'élément <label> derrière le mot de passe, de sorte qu'il semble faire partie du champ de mot de passe. Maintenant, je l'ai écrit une fonction standard pour l'élément basculant comme celui-ci:

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

je déclenche cette fonction onforus et onblur du champ de mot de passe afin que l'étiquette disparaît lorsque le champ de mot de passe est concentré, mais j'ai des problèmes avec onblur, car après type I mot de passe et appuyez sur TAB sur le qui me prend pour connecter le bouton soumettre puis l'élément <label> apparaît avec la valeur de mot de passe à nouveau et son mélangé avec mot de passe tapé. image http://i49.tinypic.com/23s7ypc.png Voici l'image de cela, alors j'ai essayé de trouver quelque chose de nouveau. Malheureusement, ce code ne fonctionne pas .. quelqu'un peut me pointer vers où ai-je fait une erreur? Donc, ce second code devrait vérifier si le champ de mot de passe est emtpy ou pas, si ce n'est pas vide, puis continuer à toogle si ce n'est pas basculer juste cacher la valeur du mot de passe. Aide: D merci

Answer 1

Essayez cela, il travaillera

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

Answer 2

HI,

essayer d'utiliser une bibliothèque comme JQuery. ils sont vraiment utiles dans des tâches aussi simples, et peuvent également gérer des tâches assez complexes ...

le point important est: une telle chose comme cacher/montrer est déjà résolu cent fois. ne pas réinventer la roue ;-)

Answer 3

Un jour, je vais contourner d'écrire les détails de cette technique, mais une mise en œuvre de travail a été assis dans mon répertoire tmp pour les six derniers mois: http://dorward.me.uk/tmp/label-work/example.html

Answer 4

Je n'ai pas tout à fait comprendre l'exigence, mais vous devez vérifier dans votre fonction si vous faites un flou sur l'action focu et réagir à ce sujet.

Peut-être quelque chose comme ça:

<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>