javascript - 在 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键后，我将登录提交按钮，然后是<label>元素再次出现并带有密码值，并且与输入的密码混合。 这是它的图像，所以我尝试想出一些新的东西。

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

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