Когда input заполнен

#javascript #jquery

Добавить класс к label, когда его input заполнен.

 
 поле 1


Как это можно реализовать на jquery?
    

Ответы

Ответ 1

$('#test1').change(function(){
    tmpval = $(this).val();
    if(tmpval == '') {
        $('#lbl1').removeClass('class1');
    } else {
        $('#lbl1').addClass('class1');
    }
});
.class1 {
  background: green;
}


 поле 1


Ответ 2

В моем решении также событие срабатывает при вставке текста и без необходимости выходить
из фокуса поля, чтобы сработали изменения.



$('#test1').on('change paste keyup', function () {
  var $this = $(this);

  var input_value = $this.val();
  var input_id = $this.attr('id');

  if (input_value.length === 0) {
    $('label[for=' + input_id + ']').removeClass('foo');
  } else {
    $('label[for=' + input_id + ']').addClass('foo');
  }
});
.foo {
  background-color: green;
}



поле 1


Ответ 3

На чистом JS:



document.getElementById('test1').onkeyup = function() {
  if(this.value == '') {
    document.getElementById('lbl1').classList.remove('class1');
  }else{
    document.getElementById('lbl1').classList.add('class1');
  }
};
.class1 {
  background: green;
}

поле 1