Javascript：在按键上显示第二个文本框

Question

我有两个文本框（pass1和pass2）。我想让pass2被隐藏，只有在pass1中输入内容时才会出现。当pass1为空时，Pass2应该隐藏。

Answer 1

<script type="text/javascript"> 

function checkVisibility() { 

    var pass1 = document.getElementById('pass1'); 
    var pass2 = document.getElementById('pass2'); 

    if (pass1.value.length > 0) { 
     pass2.style.visibility = 'visible'; 
    } else { 
     pass2.style.visibility = 'hidden'; 
    } 
} 

</script> 

<input id="pass1" type="password" onkeyup="checkVisibility()" /> 
<input id="pass2" type="password" style="visibility: hidden;"/> 

Answer 2

使用同步pass2与pass1的功能。

function syncTextFields() { 
    var pass1 = this; 
    var pass2 = document.getElementById('pass2'); 

    if(pass1.value == '') { 
     pass2.style.display = 'none'; 
    } 
    else { 
     pass2.style.display = ''; 
    } 
} 

然后在pass1字段中输入任何内容时运行同步功能。

pass1.onkeyup = syncTextFields; 

我们将逻辑分隔成一个函数，以便函数可以在页面加载时单独运行。

window.onload = function() { 
    syncTextFields(); 
    document.getElementById('pass1').onkeyup = syncTextFields; 
};