2010-06-20 10 views
9

¿Hay una forma de navegador para detectar cambios en vivo en un campo de entrada?Entrada de JavaScript de navegador cruzado detección de cambio/pegado en vivo

Por en vivo, quiero decir que no cuando el campo pierde el foco, y no en la siguiente pulsación de tecla, y así sucesivamente. Inmediatamente o algo así.

usando combinaciones de jQuery y .change(), .keyup(), .bind('paste') y así sucesivamente que puedo conseguir trabajo en la detección de cambios en vivo algunos navegadores, pero no todos. Usar diferentes combinaciones lo hará funcionar un poco en otros navegadores.

El cosa más difícil de conseguir trabajo es la manipulación del ratón del campo de entrada - selección de texto y moverlo (que se corta y pegar en esencia), haga clic y pegar o cortar, etc. Por alguna razón aún .mousedown() y .mouseup() no parecen cortarlo.

La única solución multiproveedor en la que puedo pensar ahora es compruebe el valor del campo de entrada cada 100 o más milisegundos y compare el valor con un valor almacenado. Pero esto parece excesivo cuando la solución basada en eventos se acerca tanto.

¿Existe un complemento jQuery que ya lo haga? ¿O hay alguna otra forma de lograr esto?

+0

jQuery debe ser compatible con navegadores en ese sentido, al menos para aquellos navegadores y su versión se encuentran en http://docs.jquery.com/Browser_Compatibility; Si este no es el caso, le sugiero que presente un error. – azatoth

+0

@aza No estoy exactamente seguro de qué jQuery ayudantes de eventos usar para lograr lo que quiero (una actualización inmediata de cualquier cambio en el valor del campo de entrada), ya que '.change()' se dispara cuando el campo de entrada pierde atención. ¿Tú sabes? – javascripteroo

+0

Aquí se describe una solución simple: http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript – biziclop

Respuesta

2

Para completar su cambio y manipuladores de teclas, puede agregar controladores para cut/copy/paste. Funcionan en Firefox> = 3, IE, Safari y Chrome (pero no en Opera/Konqueror).

¿Eso cubriría todo para su caso de uso?

+0

Parece prometedor. No detecta cambios de arrastrar y soltar en IE8 sin embargo. Gracias, investigaremos más. El método de adjuntar evento 'Traditional' es' elm ['onchange'] = fn'? – javascripteroo

+0

@javascripteroo: es bueno saberlo, sobre IE8. Sí, ese es el modelo tradicional (igual que elm.onchange = fn), más información aquí: http://www.quirksmode.org/js/events_tradmod.html –

1

Dependiendo de los navegadores que necesite admitir, puede utilizar HTML5 oninput.
Se dispara inmediatamente cuando cambia la entrada supervisada. En jQuery que sólo haría:

$('#my-input').bind('input', function(e) { 
    console.log("#my-input's value changed"); 
}); 
+1

soporte del navegador 'oninput': http: //blog.danielfriesen. name/2010/02/16/html5-browser-maze-oninput-support / – Dan

Cuestiones relacionadas