ejemplos - jquery focus div

jQuery: En el enfoque de entrada de formulario, muestra div. ocultar div en desenfoque(con una advertencia)

Question

Puedo hacer un show / hide de div oculto cuando un campo de entrada está enfocado / desenfocado usando el siguiente código:

  $(''#example'').focus(function() {
    $(''div.example'').css(''display'',''block'');
  }).blur(function() {
    $(''div.example'').fadeOut(''medium'');
  });

El problema es que quiero que div.example siga siendo visible cuando el usuario está interactuando dentro de esta div. Por ejemplo, haga clic o resalte el texto, etc. dentro de div.example . Sin embargo, div.example desvanece cuando la entrada no está enfocada y el mouse está interactuando con elementos dentro de div.

El código html para los elementos de entrada y div es el siguiente:

<p>
<label for="example">Text:</label>
<input id="example" name="example" type="text" maxlength="100" />
<div class="example">Some text...<br /><br />More text...</div>
</p>

¿Cómo puedo hacer que el div.example solo desaparezca cuando el usuario hace clic fuera de la entrada y / o div.example ? Intenté experimentar con enfocar / enfocar para verificar el enfoque en <p> pero eso tampoco funcionó.

¿ div.example que div.example se div.example directamente debajo del campo de entrada #example usando jQuery? El código que hace eso es el siguiente:

var fieldExample = $(''#example'');
$(''div.example'').css("position","absolute");
$(''div.example'').css("left", fieldExample.offset().left);
$(''div.example'').css("top", fieldExample.offset().top + fieldExample.outerHeight());

Mis disculpas si esto se ha preguntado anteriormente, pero las muchas preguntas div de mostrar / ocultar que leí no cubren esto. Gracias por su consejo. :)

Answer 1

Podría usar un temporizador para introducir un ligero retraso y detener el temporizador si hay un enfoque en el campo o un clic en el div:

var timer = false ;
$(''#example'').focus(function() {
    if (timer)
        clearTimeout(timer);
    $(''div.example'').css(''display'',''block'');

  }).blur(function() {

    if (timer)
        clearTimeout(timer);

    timer = setTimeout(function(){
            $(''div.example'').fadeOut(''medium'');
        },500);

  });

$(''div.example'').click(function(){
    if (timer)
        clearTimeout(timer);
})

Answer 2

Si realiza un seguimiento del evento de enfoque en el documento desde el enfoque en las burbujas, entonces puede averiguar si la cosa nueva que está enfocada está "fuera" y, si es así, hacer algo al respecto. Esto funcionará tanto para clics y tabulaciones.

$(''#example'').focus(function() {
    var div = $(''div.example'').show();
    $(document).bind(''focusin.example click.example'',function(e) {
        if ($(e.target).closest(''.example, #example'').length) return;
        $(document).unbind(''.example'');
        div.fadeOut(''medium'');
    });
});
$(''div.example'').hide();​

Se actualizó el código para usar el evento focusin y click para decidir si ocultar el div.example. Estoy usando eventos con espacios de nombre para poder llamar desvincular (''. Ejemplo'') para desenlazar ambos.

Ejemplo: http://jsfiddle.net/9XmVT/11/

Nota al margen Cambie su código de posicionamiento css para llamar solo al método css una vez:

$(''div.example'').css({
    "position":"absolute",
    "left": fieldExample.offset().left,
    "top": fieldExample.offset().top + fieldExample.outerHeight()
});

Ejemplo con el uso del div posicionado absoluto: http://jsfiddle.net/9XmVT/14/

ACTUALIZAR

Ben Alman acaba de actualizar su evento clickoutside y lo convirtió para manejar un montón de * eventos externos. http://benalman.com/projects/jquery-outside-events-plugin/

Te dejaría hacer algo como esto:

$(''#example'').focus(function() {
    $(''div.example'').show().bind(''focusoutside clickoutside'',function(e) {
        $(this).unbind(''focusoutside clickoutside'').fadeOut(''medium'');
    });
});
$(''div.example'').hide();

Answer 3

http://jsfiddle.net/9XmVT/699/

muerto mientras onclick con Iframe