2012-04-15 7 views
5

Esto parece una cosa simple, pero Google no ha aparecido nada para mí:jQuery se unen a keyUp solamente, no se centran

Como puedo unirse a un evento de cambio de texto/valor sólo, con exclusión de un foco de entrada ganando ? Es decir, teniendo en cuenta lo siguiente:

$(function(){ 
    $('input#target').on('keyup', function(){ 
    alert('Typed something in the input.'); 
    }); 
}); 

... la alerta se activaría cuando las lengüetas de usuarios dentro y fuera de un elemento, ya sea que el texto de entrada en realidad o no. ¿Cómo se puede permitir que un usuario navegue por el formulario sin activar el evento a menos que ingrese/cambie el texto en el campo de texto?

Nota: que estoy mostrando una versión simplificada de un guión, la razón para no utilizar el evento change es que en mi código real que tengo un temporizador de retardo para que el evento ocurre cuando el usuario deja de escribir para una segundo, sin que tengan que cambiar el foco para activar el evento.

Respuesta

6

tienda el valor, y en cualquier prueba de evento clave si se ha cambiado, así:

$(function(){ 
    $('input#target').on('keyup', function(){ 
     if ($(this).data('val')!=this.value) { 
      alert('Typed something in the input.'); 
     } 
     $(this).data('val', this.value); 
    }); 
});​ 

FIDDLE

+0

Me gusta esto, agradable y simple, y funciona bien con mi temporizador de retraso. ¡Gracias! – Andrew

4

Simplemente use el evento .change.

Actualización: Si desea que las notificaciones de cambio en vivo y luego hacer lo que tiene que pasar por el evento keyup, lo que significa que es necesario programar el controlador de hacer caso omiso de esas llaves que no va a resultar en el valor de ser modificado.

Puede implementar esto con una lista blanca de códigos clave que son ignorados, pero podría ponerse feo: presionando Del resultados en el valor de ser cambiado, a menos que el cursor se coloca al final de la entrada, en cuyo caso no, a menos que haya un rango seleccionado en la entrada, en cuyo caso sí lo hace.

Otra forma que personalmente encuentro más sensata si no es que es "pura" es programar su manejador para recordar el valor anterior del elemento y solo reaccionar si ha cambiado.

$(function() { 
    // for each input element we are interested in 
    $("input").each(function() { 
     // set a property on the element to remember the old value, 
     // which is initially unknown 
     this.oldValue = null; 
    }).focus(function() { 
     // this condition is true just once, at the time we 
     // initialize oldValue to start tracking changes 
     if (this.oldValue === null) { 
      this.oldValue = this.value; 
     } 
    }).keyup(function() { 
     // if no change, nothing to do 
     if (this.oldValue == this.value) { 
      return; 
     } 

     // update the cached old value and do your stuff 
     this.oldValue = this.value; 
     alert("value changed on " + this.className); 
    }); 
});​ 

Si no desea establecer propiedades directamente en el elemento DOM (en realidad, no hay nada malo en ello) entonces se podría sustituir por $(this).data("oldValue")this.oldValue cada vez que aparezca. Esto técnicamente tendrá el inconveniente de hacer que el código sea más lento, pero no creo que nadie lo note.

See it in action.

+0

Excepto quiero esto para coger los valores como los tipos de usuario (o, después de que deje de escribir), sin que tengan que cambiar fuera del campo de texto. Añadiré esta nota a la pregunta. – Andrew

+0

@Andrew: Ya veo. Mire la respuesta actualizada. – Jon

+0

Genial, gracias por la explicación! – Andrew

1

Esto lo hará, defina un atributo personalizado y comprobar que en contra:

$('input').focus(function(){ 
    $(this).attr('originalvalue',$(this).val()); 
}); 

$('input').on('keyup',function(){ 
    if($(this).val()===$(this).attr('originalvalue')) return; 
    alert('he must\'ve typed something.'); 
}); 

Tenga cuidado con los eventos que disparan varias veces.

0

Aquí hay otra versión que pone a prueba claramente si el campo de entrada está vacía.

Si la entrada está vacía, la acción no se realiza.

$(function(){ 
    $(selector).on('keyup', function(){ 
     if ($(this).val()!='') { 
      alert('char was entered'); 
     } 
    }) 
}); 
Cuestiones relacionadas