Как изменить фон textbox в зависимости от пустоты текста в нем?

Question

[Максим К]

Всем привет. Есть форма на boostrap,

<div class="col-md-6">
                <div class="form-group">
                  <label for="form_name">Метка</label>
                  <input id="val1" type="text" name="val1" class="form-control" placeholder="Метка:" style="background-color: #ADD8E6;">
                </div>
              </div>

Если нет текста - то фон белый, если есть хоть один символ , то цвет фона любой другой - как тако можно реализовать??? Может есть уже сайт с реализованным?? Просто пока понимаю, что надо брать значение текста, а вот дальше пока дебри.

Нашел типа того:

var ta= /*получаем ссылку на textarea */;

if(!ta.value.trim()) {
// ta empty
} else {

}

Но идею пока не развил (((
СПАСИБО .

Answer 1

[Алексей Ярков]

input:placeholder-shown {
    border: 1px solid red;
}

Если конечно есть placeholder

Comments

[Максим К]

СПАСИБО, работает почти как надо ))) , в google chrome если выбирается значение из уже готового (кеша), поле остается не измененным ))), а то и вообще другим цветом. Я изменил border на background-color

Answer 2

[Rerurk]

Если меняется состояние input (onchange) смотрите длину введённого текста, если 0 меняете background