Javascript: Показать второе текстовое поле на клавиатуре

Question

У меня есть два текстовых поля (pass1 и pass2). Я хочу, чтобы pass2 был скрытым и появлялся только когда что-то вводилось в pass1. Pass2 должен скрываться, когда pass1 имеет значение null.

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