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后，我将登录提交按钮然后{ {1}}元素再次显示密码值，并与键入的密码混合。这是图像，所以我尝试了一些新的东西。

<label>

不幸的是，这段代码不起作用..有人能指出我在哪里弄错了吗？因此，第二个代码应该检查密码字段是否为emtpy，如果它不为空，则继续toogle如果不切换只是隐藏密码值。帮助：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

HI，

尝试使用像JQuery这样的库。他们在这么简单的任务中真的很有用，也可以处理相当复杂的任务......

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

在javascript中切换标签元素

4 个答案: