4

Buenas gente.

Estoy tratando que al rellenar un input él mismo cambie su background-color,esto se tendria que hacer dinamicamente,sin tener la necesidad de hacer click en un boton o recargar la pagina. He intentado esto, pero no funciona:

function ActiveInputs() {
var gg = $('#search-form').find('input:text,select, textarea').val();

$(gg).on('blur', function () {

    if ($(this).val() != '') {
        $(this).css('background-color', 'red');
    }
});

¿Álguien me echa una mano?

2
  • 1
    Hola, podrías poner tu HTML o un ejemplo de tu código que no funciona, sería mas fácil darte la ayuda.
    – Wilfredo
    el 30 may. 2016 a las 14:03
  • sabes como podrias usar esa accion, pero que al detectar el valor vacio del input , cambie el color de un label y un span?
    – Alexcertz
    el 8 nov. 2018 a las 15:14

2 respuestas 2

4

Puedes utilizar el selector :input para coger todos los elementos del form. En el evento change compruebas si tiene valor y, en función de si el valor es vacío o no, le asignas la clase css para cambiar el fondo:

$(function(){
  $('#search-form :input')
    .change(function(){
      var $input = $(this);
      if ($input.val() === '')
      {
        $input.removeClass('filledInputs');
      }
      else
      {
        $input.addClass('filledInputs');
      }
    });
});
.filledInputs{
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="search-form">
  <input type="text" /> <br /><br />
  <textarea cols="20" rows="4"></textarea> <br /><br />
  <select>
    <option value=""></option>
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option value="3">Tres</option>
    <option value="4">Cuatro</option>
  </select>
</form>

1
  • Gracias por responder :)
    – Andromeda
    el 30 may. 2016 a las 15:33
2

Podrías crear una función para modificar el css con jquery y ejecutar directamente a través del evento onchange() por ejemplo:

function cambio(elemento){
  if ($(elemento).val() === "") {
    $(elemento).css("background-color", "");
  }
  else{
    $(elemento).css("background-color", "blue");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <label for="example">Ingreso Texto</label>
  <input type="text" onchange="cambio(this)" id="example" name="example"/>
</body>

1
  • Funciono gracias :)
    – Andromeda
    el 30 may. 2016 a las 15:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.