2011-01-03 21 views
22

Quiero detectar cuando un usuario hace clic fuera de un texto tipo de entrada de campo, no enjQuery -. Detectar cuando un usuario hace clic fuera de un tipo de entrada de campo de texto

Aquí es lo que tengo, pero ambos eventos están disparando contra clic en el interior (foco):

<input id="title" val="hello" /> 

$("#title").focusout(function() { 
    console.log('inside'); 
}).blur(function() { 
    console.log('outside'); 
}); 
+3

'blur' es lo suficientemente bueno para lo que necesita. ¿Cuál es exactamente la pregunta? –

+1

¿Estás seguro? Ambos disparan cuando * salgo * del campo. [Ejemplo] (http://jsfiddle.net/j3XWM/) – user113716

+0

Por favor, aclare su pregunta. Tu descripción de lo que está sucediendo es lo contrario de lo que debería suceder para esos eventos. ¿Estás diciendo realmente que 'enfoque' y 'desenfoque' disparan al hacer clic * dentro * de la entrada? – user113716

Respuesta

52

Puede enlazar su evento focus y blur así:

<input id="title" val="hello" type="text" /> 

$("#title").focus(function() { 
    console.log('in'); 
}).blur(function() { 
    console.log('out'); 
}); 

focusout no es necesario, ya que está dirigido a la propagación de eventos para los elementos secundarios: http://api.jquery.com/focusout/

10

se puede escribir un plugin poco, al igual que

(function($){ 
    $.fn.outside = function(ename, cb){ 
     return this.each(function(){ 
      var $this = $(this), 
       self = this; 

      $(document).bind(ename, function tempo(e){ 
       if(e.target !== self && !$.contains(self, e.target)){ 
        cb.apply(self, [e]); 
        if(!self.parentNode) $(document.body).unbind(ename, tempo); 
       } 
      }); 
     }); 
    }; 
}(jQuery)); 

..y usarlo como:

$('#title').outside('click', function(e) { 
    console.log('outside'); 
}); 

Ejemplo: http://www.jsfiddle.net/tGnun/

+0

muy inteligente. ¿Quizás podrías explicar lo que hacen los trabajos internos? –

+0

me gusta, siempre he querido aprender a escribir el complemento – doniyor

2

es el aspecto de focusout() y blur() están provocando tanto cuando se hace clic fuera del texto. Intenta usar focus() en su lugar. Verifique here.

+0

OP no quiere enfocar. Él quiere que el código se dispare al dejar la entrada. – user113716

+0

@patrick, sí, pero él indicó que ambos dispararon al ingresar a la entrada. Para mí, ambos dispararon al irse (como mencionaste), así que supuse que tal vez estaba un poco confundido. Mi jsfiddle tiene una alerta que desencadena la entrada y salida así que pensé que valía la pena publicarla. –

0

no estoy 100% seguro de que esto es lo que quiere, pero aquí hay una puñalada:

<html> 
<head> 
<title>Example</title> 
<script src="jquery-1.4.3.js" type="text/javascript"></script> 
</head> 
<body id="body"> 
<script> 
    $("document").ready(function() 
    { $("#body").click(function() 
     { alert("body"); }); 
     $("#input").click(function(event) 
     { alert("input"); event.stopPropagation(); }); 
    }); 
</script> 
<h2>input below</h2> 
<input id="input" type="text"/> 
</body> 
</html>
Cuestiones relacionadas