Javascript Eventos: recibir notificaciones de cambios en un valor <input> de control

Question

tengo el siguiente problema:

Tengo un cuadro de texto HTML (<input type="text">) cuyo contenido es modificado por un guión que no puedo tocar (que es mi página, pero estoy usando componentes externos).

Deseo recibir notificaciones en mi script cada vez que cambie el valor de ese cuadro de texto, para que pueda reaccionar.

He intentado esto:

txtStartDate.observe('change', function() { alert('change' + txtStartDate.value) }); 

la que (previsiblemente) no funciona. Solo se ejecuta si yo mismo cambio el valor de la caja de texto con el teclado y luego muevo el foco a otra parte, pero no se ejecuta si la secuencia de comandos cambia el valor.

¿Hay algún otro evento que pueda escuchar, del que no tenga conocimiento?

estoy usando la librería Prototype, y en caso de que sea relevante, el componente externo modificando el valor de texto es Selector de fecha básicos (www.basicdatepicker.com)

Answer 1

Como usted tiene implícito, cambio (y otros eventos) solo se activan cuando el usuario realiza alguna acción. Un script que modifique cosas no activará ningún evento. Su única solución es encontrar un gancho en el control que pueda conectar con su oyente.

Aquí es cómo lo haría:

basicDatePicker.selectDate = basicDatePicker.selectDate.wrap(function(orig,year,month,day,hide) { 
    myListener(year,month,day); 
    return orig(year,month,day,hide); 
}); 

que se basa en una mirada superficial con Firebug (no estoy familiarizado con el componente). Si hay otras maneras de seleccionar una fecha, entonces deberá envolver esos métodos también.

Answer 2

Dependiendo de cómo se haya escrito el javascript externo, siempre puede volver a escribir las partes relevantes del script externo en el script y hacer que sobrescriba la definición externa para que se active el evento de cambio.

He tenido que hacer eso antes con scripts que estaban fuera de mi control.

Solo necesita encontrar la función externa, copiarla en su totalidad como una nueva función con el mismo nombre, y volver a escribir la secuencia de comandos para hacer lo que quiera.

Por supuesto, si el guión fue escrito utilizando correctamente los cierres, usted no será capaz de cambiar con demasiada facilidad ...

Answer 3

es decir, tiene un evento onpropertychange que podría ser utilizado para este propósito.

Para los navegadores web reales (;)), hay un DOMAttrModified mutation event, pero en un par de minutos de experimentación en Firefox, no he podido activarlo en una entrada de texto cuando el valor se cambia programáticamente (o mediante la entrada de teclado normal), pero se disparará si cambio el nombre de la entrada de forma programática. Más curioso y más curioso ...

Si no se puede conseguir que el trabajo de forma fiable, siempre se puede simplemente sondear el valor de la entrada regular:

var value = someInput.value; 

setInterval(function() 
{ 
    if (someInput.value != value) 
    { 
     alert("Changed from " + value + " to " + someInput.value); 
     value = someInput.value; 
    } 
}, 250); 

Answer 4

Aparte de conseguir alrededor del problema como la forma explicada Noé, usted podría también acaba de crear un temporizador que verifica el valor cada pocos cientos de milisegundos.

Answer 5

Tuve que modificar el control del paginador datable YUI una vez en la forma aconsejada por Dan. Es fuerza bruta, pero funcionó para resolver mi problema. Es decir, ubique el método de escritura en el campo, copie su código y agregue una instrucción activando el evento de cambio y en su código solo maneje ese evento de cambio. Solo tiene que anular la función original con esa nueva versión de la misma. El sondeo, aunque funciona bien, me parece una solución que consume muchos más recursos.

Answer 6

addEventListener ("DOMControlValueChanged 'se disparará cuando se cambia el valor de un control, aunque sea por un guión.

addEventListener (' input" es un usuario directo iniciada versión filtrada de DOMControlValueChanged.

Desafortunadamente , DOMControlValueChanged solo es compatible con Opera actualmente y el soporte de eventos de entrada está roto en webkit. El evento de entrada también tiene varios errores en Firefox y Opera.

Esto probablemente se borrará en HTML5 muy pronto, ww

Actualización:

A partir del 09/08/2012, el apoyo DOMControlValueChanged se ha caído de la Opera (ya que fue retirado de HTML 5) y el apoyo de eventos 'de entrada' es mucho mejor en los navegadores (incluyendo menos errores) ahora.