在javascript中切换标签元素

Question

大家好，我最近问过this question，我已经放弃了“替换输入的想法”。相反，我决定尝试另一种方法..

我已将密码字段背景设为透明，并将<label> 元素放在密码输入“后面”，使其看起来是密码字段的一部分。现在我写了一个标准函数来切换这样的元素：

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

我从密码字段触发此功能 onforus 和 onblur 以便当密码字段聚焦时标签消失但我遇到 onblur 问题，因为在我输入密码并点击 TAB 后，我将登录提交按钮然后@ 987654326@ 元素再次与密码值一起出现，并且与键入的密码混合。 这是它的图像，所以我试着想出一些新的东西。

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 = '';
                        }
                    }
                               }

不幸的是，这段代码不起作用..有人能指出我在哪里犯了错误吗？所以第二个代码应该检查密码字段是否为空，如果它不为空，则继续togle，如果它不切换只是隐藏密码值。帮助 :D 谢谢

Answer 1

试试这个就行了

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

有一天我会开始写下这项技术的细节，但在过去的六个月里，我的 tmp 目录中一直有一个有效的实现：http://dorward.me.uk/tmp/label-work/example.html

Answer 3

我不太明白这个要求，但是如果你对焦点动作做模糊处理并对此做出反应，你应该在你的函数中验证。

也许是这样的：

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

Answer 4

嗨，

尝试使用像 JQuery 这样的库。 他们对这些简单的任务非常有帮助，也可以处理相当复杂的任务......

重点是： 像隐藏/显示这样的事情已经解决了数百次。 不要重新发明轮子;-)