Javascript: показывать второе текстовое поле при нажатии клавиш

Question

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

Answer 1

Используйте функцию, которая синхронизирует 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;
};

Answer 2

<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;"/>