Поменять фон при вводе в текст поле input

Question

    var inputs = document.querySelectorAll('input[type=text]'),
        sidebar = document.querySelector('.sidebar');
    Array.prototype.forEach.call(inputs, function (el) {
        el.addEventListener('focus', function () {
            sidebar.style.backgroundColor = '#59a4ea';
        })
        el.addEventListener('blur', function () {
            sidebar.style.backgroundColor = '#eee';
        })
    })

.inner-content{
    width: 200px;
    padding: 15px;
    margin-top: 20px;
    border: #2c5694 2px solid;
}
.inner-content > input{
    border-color: #2c5694;
}
 .inner-content > textarea{
     border-color: #2c5694;
 }
#block{
     width: 200px;
    height: 200px;
    border: 1px solid black;
    background: #84a1e0;
}
.sidebar {
    background-color: #eee;
}

<form>
        <div class="inner-content sidebar"><input type="text"></div>
        <div class="inner-content sidebar"><input type="email"></div>
</form>

Надо поменять фон при фокусе в какое либо поле input,кол-во input может меняться. Как сделать что бы примеялся и для emails, texarea я знаю, этот скрипт можна копировать и изменить input[type=], а можна как то по другому

Answer 1

При вводе в инпут происходит проверка: если он не пустой ему добавляется класс noempty. Если пустой - удаляется.

const input = document.querySelector('input');

input.addEventListener('input', function() {
  if (this.value.trim().length === 0) {
    this.classList.remove('noempty');
  } else {
    this.classList.add('noempty');
  }
});

.noempty {
  background-color: green;
}

<input type="text">

БЛОГ НА HUSL

Поменять фон при вводе в текст поле input

Ответы (1 шт):