jquery agregar clase a principal en el foco de entrada

Tengo un formulario de contacto. Quiero agregar clase a padres div del cuadro de entrada en la entrada: foco. Aquí está el fiddle. Quiero que no solo el cuadro de entrada, sino que el color de fondo div cambie a púrpura en el foco de entrada.jquery agregar clase a principal en el foco de entrada

de marcado:

<div class="round"> 
    <div class="round_label">name</div> 
    <input type="text" class="round_text"> 
</div>

Javascript:

jQuery(document).ready(function($) { 
    $(".round_text:focus").parent().css('background', '#8b66ac'); 
    $('.round_text:focus').parent().css('background-color', 'red'); 
});

CSS:

.round { 
    background: none repeat scroll 0 0 #F3F3F3; 
    border-radius: 30px 30px 30px 30px; 
    border-top: 1px solid #B2B2B2; 
    height: 50px; 
    padding-left: 20px; 
    width: 440px; 
} 
.round_text:focus { 
    background: none repeat scroll 0 0 #8b66ac; 
} 
.round_label { 
    border-right: 1px solid #D1D1D1; 
    color: #B6B6B6; 
    float: left; 
    font-size: 16px; 
    height: 40px; 
    padding-top: 10px; 
    width: 156px; 
} 
.round_text { 
    background: none repeat scroll 0 0 #F3F3F3; 
    border: medium none; 
    color: #424242; 
    float: left; 
    height: 50px; 
    width: 240px; 
}

Además, ¿me pueden ayudar como si tengo que añadir dos propiedades, por ejemplo:

$(".round_text").focus(function(){ 
     $(this).parent().css('background', '#8b66ac','color','#fff'); 

    }).blur(function(){ 
     $(this).parent().css('background', /*color*/); 
    })

Fuente

2012-06-04 user930026

Siempre agregue el código en cuestión, junto con enlace jsFiddle – Jashwant

Gracias por la sugerencia . Lo hará desde la próxima vez. – user930026

Puede agregar clase en lugar y darle el estilo

jQuery(document).ready(function($) { 

$(".text").focus(function(){ 
    $(this).parent().removeClass("round"); 
    $(this).parent().addClass("bluebg"); 

    }).blur(function(){ 
     $(this).parent().removeClass("bluebg"); 
    $(this).parent().addClass("round"); 
    }) 

});  

.bluebg { 
background: none repeat scroll 0 0 #8b66ac; 
color:#623886; 
}

Fuente

2012-06-04 09:27:03

probar este evento Utilice el enfoque

$("input").on("focus",function(){ 
    $(this).parent().addClass("any_class").css("background","purple"); 
    });

Fuente

2012-06-04 08:07:12

¿por qué agregar clase Y usar el método css()? – charlietfl

He leído el título donde op quiero agregar la clase a los padres y en la descripción que quiere establecer el fondo a morado, por lo tanto, establezco ambos –

$(".round_text").focus(function(){ 
     $(this).parent().css('background', '#8b66ac'); 

    }).blur(function(){ 
     $(this).parent().css('background', /*color*/); 
    })

EDIT: Solución alternativa usando toggleClass()

CSS

.round_text:focus, .round.is_focused { 
    background: none repeat scroll 0 0 #8b66ac; 
}

$(".round_text").on('focus blur', function(){ 
    $(this).parent().toggleClass('is_focused'); 
})

Fuente

2012-06-04 08:08:42 charlietfl

Respuesta perfecta :) Gracias –

Si yo estoy haciendo la pregunta correcta,

Usted está seleccionando focused elementos, pero necesita cambiar css del padre div en focus evento.

Hacer esto,

jQuery(document).ready(function($) { 

    $(".round_text").focus(function(){ 
     $(this).parent().css('background', '#8b66ac'); 
    }) 
});

Fiddle

Fuente

2012-06-04 08:09:45 Jashwant

jquery agregar clase a principal en el foco de entrada

Respuesta

Cuestiones relacionadas