0

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

<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 , но если честно не понимаю как.

3
  • :placeholder-shown caniuse.com/#feat=css-placeholder-shown Но лучше сделать плэйсхолдер самому, через span, это даст большую кроссбраузерность. 5 янв 2018 в 21:26
  • @AndreyFedorov, при чем тут placeholder, в чем идея?
    – Air
    5 янв 2018 в 23:29
  • @Air показал пример в ответе... 6 янв 2018 в 7:14

3 ответа 3

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>

1

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>

0

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.