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

364
23 января 2017, 20:29

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

 <input type="text" id="test1">
 <label for="test1">поле 1</label>

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

Answer 1

$('#test1').change(function(){ 
    tmpval = $(this).val(); 
    if(tmpval == '') { 
        $('#lbl1').removeClass('class1'); 
    } else { 
        $('#lbl1').addClass('class1'); 
    } 
});
.class1 { 
  background: green; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" id="test1"> 
 <label id="lbl1" for="test1">поле 1</label>

Answer 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; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="test1"> 
<label for="test1">поле 1</label>

Answer 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; 
}
<input type="text" id="test1"> 
<label id="lbl1" for="test1">поле 1</label>

READ ALSO
jQuery не работает на странице jsp

jQuery не работает на странице jsp

Доброй ночи! Пытаюсь разобраться как работает jQuery но не могу его нормально настроить на jsp страницеНа странице html код работает нормально

336
Вставить данные json из файла в html

Вставить данные json из файла в html

Здравствуйте! Помогите пожалуйста разобраться в вопросе: Беру json данные из внешнего файла и пытаюсь вставить в предназначенные для них элементыНо...

592
Сложение свойств объекта

Сложение свойств объекта

Необходимо в объект записать свойства двух других объектов, но при этом одинаковые свойства не заменять, а складывать значения ключейПример:

323