Как установить цвет значка, когда входы не пустые?

Я хочу, чтобы цвет связанного значка входов менялся, когда я фокусируюсь на входах или когда входы не пустые. Но мой код работает неправильно, когда входы не пустые.Как установить цвет значка, когда входы не пустые?

    <div class="form-group"> 
         <label class="label-login" for="emailInput">Email</label> 
         <input type="email" class="form-control" autocomplete="off" id="emailInput" /> 
         <i class="fa fa-envelope"></i> 
        </div> 
        <div class="form-group"> 
         <label class="label-login" for="passInput">Password</label> 
         <input type="password" class="form-control" autocomplete="off" id="passInput" /> 
         <i class="fa fa-lock"></i> 

        </div> 

    $(document).ready(function() { 
    $(".myPanel .form-control").each(function() { 
    var valueInput = $(this); 
    valueInput.focus(function() { 
     valueInput.next().addClass("colorOrange");  
    }); 

    valueInput.blur(function() { 
     valueInput.next().removeClass("colorOrange"); 
    }); 
    valueInput.on('input', function() { 
     if (valueInput.val().length > 0) { 
      valueInput.prev().addClass("lableFocus"); 
      valueInput.next().addClass("colorOrange"); 
     } else { 
      valueInput.prev().removeClass("lableFocus"); 
      valueInput.next().removeClass("colorOrange"); 
     } 
    }); 
    }); 
}); 
    .colorOrange{ 
     color:#FFAE00; 
    }

источник

2017-02-22 user3903648

Это один файл? Если это так, вы должны окружить javascript

Ваша проблема с областью применения. valueInput существует в функции .ready(), но не наследуется в пределах функций .blur() и .on(). В них используется this, что является ссылкой на элемент, который вызвал событие.

источник

2017-02-22 19:44:16 Gwellin

Вы можете сделать это в чистом CSS, используя псевдокласс класса :valid. Это позволяет сделать что-то вдоль линий

/* html */ 

    <div class="form-group"> 
     <label class="label-login" required for="passInput">Password</label> 
     <input type="password" class="form-control" autocomplete="off" id="passInput" /> 
     <i class="fa fa-lock"></i> 
    </div> 

/* css */ 
input:valid + i.fa-lock { 
    color: $your-valid-color; 
}

Через несколько notes--

необходимо отметить ввод в случае необходимости, или же он будет всегда действительным.
Непустая тип = «текст» элемент будет действовать
вы можете задать шаблон регулярных выражений поставить ограничения на то, что считается действительным, или использовать атрибут MINLENGTH

Проверьте полную документацию here. Стандартные поля формы/ввода html довольно мощные, поэтому вы можете многое сделать с их помощью.

источник

2017-02-22 19:48:06 LukeG

Как установить цвет значка, когда входы не пустые?

Смежные вопросы