2010-06-14 15 views
6

En jQuery, ¿cómo puedo rastrear el evento onchange si el valor del cuadro de texto está cambiando dinámicamente desde algún otro evento. He intentado esto pero no su trabajo:cambio de jquery no funciona en caso de cambio de valor dinámico

$("#txtbox").change(function(){ 
    alert("change"); 
}); 
+0

Ver [$ ("# some-input") .changePolling()] (https://gist.github.com/2944926); para un contenedor que comprueba el valor actual y desencadena '.change()' si ha cambiado. –

Respuesta

0

el evento change sólo se activa cuando el elemento pierde el foco. Use el evento keyup en su lugar.

11

keyup no abarca todos los casos naturales :(

Dos casos cuando change y keyup no funcionará:

navegador
  • mecanismos de los formularios de autocompletar
  • pasta de ratón realizado desde el portapapeles del sistema.

Ejemplo: form tiene textbox destinado a poner una dirección de correo electrónico en él, y onch ange, los eventos de keyup están unidos a él.

Cuando el usuario comienza a escribir una dirección de correo electrónico, si p. Aparece el cuadro de autocompletado de Chrome o Firefox y el usuario hace clic en una de las opciones, el cuadro se llena con el valor, el foco permanece dentro del cuadro de texto (para no activar el evento de cambio) y no se presiona ninguna tecla (ningún evento de teclado). Traté de adjuntar clic a la lista, pero causa un comportamiento extraño en mi navegador.

Similar al pegar: si se utiliza el mouse para pegar (a través del menú contextual disponible al hacer clic con el botón derecho del mouse), no se activan los eventos de cambio de teclado ni de cambio.

Cualquiera tiene una solución completa para esto, es decir, cómo manejar los cambios reales del valor de la entrada?

+1

Me encuentro con el mismo problema. Al menos ahora tengo más conocimiento sobre la situación. Tnaks! – MrM

1

Estoy de acuerdo con Jakub P.

He intentado utilizar jQuery para manejar un cambio a presentar el tipo de entrada de archivo (para previsualizar imagen cargada) pero no daría lugar, así como la llanura de edad Javascript onchange evento.

me cambió la forma I adjunto al controlador de eventos en el $(document).ready()

de:

$("#iconImage").bind("change", function(event) { 
    ChangeImage("iconImage", "iconImagePreview"); 
}); 

a:

var obj = document.getElementById("logoImage"); 
obj.onchange = function() { 
    ChangeImage("logoImage", "#logoImagePreview"); 
}; 

y obtener el comportamiento que esperaba.

2

Estaba buscando una solución como esta que activaría sin que el usuario tenga que abandonar el elemento, pero que funcionaría para todos los casos, incluidos los identificados por Jakub en su publicación. Es decir.

  • escritura normal
  • pegar a través del ratón
  • autocompletar

También idealmente quería una solución jQuery como yo estaba usando varios selectores de jQuery, etc y no quería la molestia de "desenvolver" mi jQuery se opone para llegar al elemento DOM.

yo fuimos para una solución utilizando 3 eventos diferentes factores desencadenantes - ver los comentarios en el ejemplo de código para qué:

var valuechanged = function() { 
    // do something 
}; 
var inputtowatch = $('.selector'); 
inputtowatch.on('input', valuechanged); 
inputtowatch.on('keyup', valuechanged); // input event is buggy and doesn't catch delete/backspace in IE, but can't just use keyup alone as that doesn't catch paste and automcomplete 
inputtowatch.on('propertychange', valuechanged); // input event not supported in IE < 9 

que espera que el uso de múltiples eventos como esto podría resultar en la función de ser disparado varias veces . En mi prueba en Firebug, eso no sucedió. Sin embargo, estaba en la afortunada posición de no importarme si la función funcionaba "demasiadas veces" y por lo tanto no probaba más este aspecto en particular (por ejemplo, otros navegadores).

Cuestiones relacionadas