-1

Есть обычные input-ы. Если они пустые бекграунд красный. Если они не пустые бекграунд серый(тут нужно предусмотреть ввод информации пользователем). Реализовывал через Jquery но в силу своих начальных знаний не смог справиться с такой, на первый взгляд простой задачей.

Пробовал сделать вот так.

$(document).ready(function(){
    if($(".necessary").val() == ""){
        $(".necessary").css("background-color", "red");
    } else {
        $(".necessary").css("background-color", "green");
    }
});

Должен обратить внимание на то, что нужно предусмотреть ввод информации пользователем. То есть если сначала поле пустое, то когда пользователь ввел какую-то информацию, поле меняет цвет.

2
  • Ну и проблема в чем? Используйте перебор всех полей через $.each например.
    – u_mulder
    14 авг 2015 в 10:00
  • Все три (на данный момент) ответа идентичны, но в них пропущен один момент. Если будет хоть один пробел, то значение поля уже не будет считаться пустым. Если это для вас важно, то примените метод .trim(), т.е: $.trim( $(el).val() );
    – Deonis
    14 авг 2015 в 10:11

2 ответа 2

2

Используйте этот код

$('input').on('change load', function(){
  $(this).css('background-color': $(this).val() ? 'green' : 'red');
}); 
5
  • По-хорошему нужно еще и событие input слушать. 14 авг 2015 в 10:14
  • @DmitriySimushev вы имели в виду keypress? 14 авг 2015 в 15:07
  • Нет, я имею в виду именно input: developer.mozilla.org/en-US/docs/Web/Events/input 14 авг 2015 в 15:09
  • Хотя для старых браузеров можно еще и keypress добавить =) 14 авг 2015 в 15:10
  • @DmitriySimushev если добавить keypress и input то функция будет вызываться дважды при каждом нажатии. Не очень красиво. Наверное лучшее решение - это .on('keypress load') 14 авг 2015 в 16:02
0
$( ".necessary" ).each( function() {
    $( this ).css("background-color", $( this ).val() == ""? "red" : "green");
} );

Либо вообще можно изначально поставить всем полям цвет green (в css например), а затем отфильтровать незаполненные и поставить бекграунд только им:

$( ".necessary" ).filter( function() {
    return $( this ).val() == "";
} ).css("background-color", "red");

Ваш ответ

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

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