Изменение цвета кнопки button при заполнении полей text и password

330

07 января 2018, 08:04

Есть такой код

<form class = "layer1" name = "form">
      <input type = "text" name = "telephonenumber" maxlength="10" class = "login" >
        <input type = "password" name = "password" value = "" 
        placeholder="Пароль" class = "password">
        <button class = "grnd" name ="button" >

Хотелось бы, чтобы при заполнении полей логина и пароля , изменялся цвет кнопки ,соответственно , если весь текст будет удален из этих полей , чтобы кнопка принимала прежний вид. Хочу сделать на чисто js , но если честно не понимаю как.

Answer 1

var pass = document.querySelector('.password'); 
var login = document.querySelector('.login'); 
 
 
pass.addEventListener('input', changeBackground); 
login.addEventListener('input', changeBackground); 
 
function changeBackground() { 
  if (pass.value !== '' && login.value !== '') { 
    document.querySelector('button').style.background = 'green'; 
  } else { 
    document.querySelector('button').style.background = 'red'; 
  } 
}

button { 
  background: red; 
}

<form class="layer1" name="form"> 
  <input type="text" name="telephonenumber" maxlength="10" class="login" /> 
  <input type="password" name="password" value="" placeholder="Пароль" class="password" /> 
  <button class="grnd" name="button">button</button> 
</form>

Answer 2

Надо проверять когда поле теряет фокус,для этого подписаться на событие blur,
пример:

var fieldLogin = document.querySelector('.login');
fieldLogin.addEventListener('blur', function(){
  if(!fieldLogin.value.length) alert('few');
});

Answer 3

input:placeholder-shown+input:placeholder-shown+button, 
input:placeholder-shown+button { 
  background-color: red; 
} 
 
input:not(:placeholder-shown)+input:not(:placeholder-shown)+button { 
  background-color: green; 
}

<form class="layer1" name="form"> 
  <input type="text" name="telephonenumber" maxlength="10" class="login" placeholder="Логин"> 
  <input type="password" name="password" value="" placeholder="Пароль" class="password"> 
  <button class="grnd" name="button">Lorem</button> 
</form>