Eliminar/agregar clase CSS en el foco/desenfoque de entrada

Tengo un formulario con algunos campos de entrada y un pequeño <div> a la derecha de cada entrada con una pequeña descripción. Lo que quiero es habilitar una clase CSS para cada entrada propia <div> con su propia descripción.Eliminar/agregar clase CSS en el foco/desenfoque de entrada

He hecho un ejemplo de trabajo aquí: http://jsfiddle.net/VL2FH/8/. Esto usa el <div>: estado de desplazamiento en el estado de enfoque de la entrada.

Lo que quiero preguntar es: ¿Hay algún tipo de "acceso directo", así que no tengo que hacer:

$('#submit_name').bind('blur', function(){ 
    $('#submit_name-desc').removeClass('input-desc-hover').addClass('input-desc'); 
}); 
$('#submit_name').bind('focus', function(){ 
    $('#submit_name-desc').removeClass('input-desc').addClass('input-desc-hover'); 
});

Para cada campo de entrada en la forma.

Fuente

2012-06-23 Morten Hagh

gusta esta http://jsfiddle.net/joycse06/VL2FH/11/ –

¡Exactamente así! Esto funciona absolutamente perfecto! ¿Podrías hacer una respuesta? –

Ok, haciendo una respuesta. –

Se puede generalizar la devolución de llamada focus and blur como esto

$('input').on('blur', function(){ 
    $(this).next('div').removeClass('input-desc-hover').addClass('input-desc'); 
}).on('focus', function(){ 
    $(this).next('div').removeClass('input-desc').addClass('input-desc-hover'); 
});

Si su descripción divs están al lado del elemento de entrada, no tendrán ningún problema.

Y es mejor usar .on() para el enlace de eventos.

Demostración:http://jsfiddle.net/joycse06/VL2FH/11/

Fuente

2012-06-23 13:31:25

+1 para una solución simple.Tiendo a complicar demasiado las cosas :) –

Gracias 1000 por esto :) Y esta solución puedo reutilizarla en el sitio donde tengo diferentes formularios con diferentes nombres/identificadores, etc., sin ajustarlo. –

@MiroslavPopovic, gracias Señor. :) –

Use clases en lugar de identificadores para seleccionar elementos. Si los elementos de entrada tienen submit-name clase y sus descripciones desc clase, podría hacerlo de esta manera:

$('.submit-name').bind('blur', function(){ 
    $("~ .desc", this).first().removeClass('input-desc-hover').addClass('input-desc'); 
}).bind('focus', function(){ 
    $("~ .desc", this).first().removeClass('input-desc').addClass('input-desc-hover'); 
});

$("~ .desc", this).first() seleccionará el primer hermano del elemento de entrada (this) con una clase desc.

He aquí un jsFiddle actualizado para que: http://jsfiddle.net/miroslav/VL2FH/13/

Editar

Joy's solution con $(this).next() es mucho mejor sin embargo.

Fuente

2012-06-23 13:22:53

Comprobar este programa ejemplo que sigue

<html> 
     <head> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
      <script type="text/javascript"> 
       $(document).ready(function() 
       { 

        $('#submit_name').bind('blur', function() 
        { 
         $('#submit_name-desc').removeClass('cls1').addClass('cls2'); 
        }); 

        $('#submit_name').bind('focus', function() 
        { 
         $('#submit_name-desc').removeClass('cls2').addClass('cls1'); 
        }); 
       }); 
      </script> 

      <style> 
       .cls1 
       { 
        background-color: #ccc;     
       } 

       .cls2 
       { 
        background-color: #fff; 
       } 
       .submit_name-desc 
       { 
        height: 30px; 
        border: 1px; 
       } 
      </style> 
     </head> 
     <body> 
      <input type="text" id="submit_name" /> 
      <div id="submit_name-desc"> 
       Name Description 
      </div> 
     </body> 
    </html>

Fuente

2012-06-23 13:32:20 Hearaman

También puede conseguir el mismo efecto en el CSS solamente usando el selector de hermanos adyacentes + de modo que cualquier .input-desc siguiente directamente una entrada enfocada tendrá las diferentes reglas aplicadas:

input:focus + .input-desc { 
    cursor: default; 
    width: 265px;  
    -moz-box-shadow: 0px 2px 5px #aaaaaa; 
    -webkit-box-shadow: 0px 2px 5px #aaaaaa; 
    box-shadow: 0px 2px 5px #aaaaaa; 
    animation:desc 0.3s; 
    -moz-animation:desc 0.3s; /* Firefox */ 
    -webkit-animation:desc 0.3s; /* Safari and Chrome */ 
}

El selector de hermanos adyacentes es el apoyo en los navegadores modernos e Internet Explorer desde la versión 8. (http://reference.sitepoint.com/css/adjacentsiblingselector)

Aquí está un violín: http://jsfiddle.net/VL2FH/14/

Fuente

2012-06-23 22:54:04 jussinen

Eliminar/agregar clase CSS en el foco/desenfoque de entrada

Respuesta

Cuestiones relacionadas