2011-05-26 23 views
21

¿El elemento de entrada de texto no tiene un evento de cambio? Cuando adjunto un manejador de eventos de cambio a una entrada de texto, no se dispara. Keyup se activa, pero el keyup no es suficiente para detectar un cambio ya que obviamente hay otras formas de ingresar texto en una entrada.jQuery textbox change event

+2

Quizás esto ayude: http://stackoverflow.com/questions/1481152/jquery-how-to-detect-a-textboxs-content-has-changed – Bashwork

+0

¿Está usando $ ('input'). Change (function() {hacer algo}); ? – tenshimsm

+0

Sí, estaba usando .change y .keyup, pero no son suficientes, consulte mi respuesta a continuación ... – jcvandan

Respuesta

4

No hay una solución real para esto, incluso en los enlaces a otras preguntas dadas anteriormente. ¡Al final he decidido usar setTimeout y llamar a un método que verifica cada segundo! No es una solución ideal, pero una solución que funciona y el código que estoy llamando es lo suficientemente simple como para no tener un efecto en el rendimiento al ser llamado todo el tiempo.

function InitPageControls() { 
     CheckIfChanged(); 
    } 

    function CheckIfChanged() { 
     // do logic 

     setTimeout(function() { 
      CheckIfChanged(); 
     }, 1000); 
    } 

Espero que esto ayude a alguien en el futuro, ya que parece que no hay manera segura de acheiving esto utilizando controladores de eventos ...

14

El evento de cambio solo se dispara después de que la entrada pierde el foco (y se cambió).

+3

Si REALMENTE desea saber cuándo cambia algún texto, más o menos como cambia, está atrapado sondeando la entrada. Es decir, use setInterval con una función que compare el valor actual de la entrada con un valor previamente almacenado (a través de una variable con un alcance mayor que la función). Si los dos valores no coinciden, se produjo un cambio. Luego, almacene el valor actual en esa otra variable para la siguiente verificación. – ventaur

28

La especificación HTML 4 para el <input> element especifica los siguientes eventos de secuencias de comandos están disponibles:

onfocus, onblur, onselect, onchange, onclick, ondblclick, onMouseDown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

He aquí un ejemplo que se unen de a todos estos eventos y muestra lo que está pasando http://jsfiddle.net/pxfunc/zJ7Lf/

Creo que se puede filtrar qué eventos son verdaderamente relevante a su situación y detectar lo que el valor de texto era antes y después del evento para determinar un cambio

+1

Pensé en usar cambio, enfoque, desenfoque, combinación de teclas y mouseup todos juntos; sin embargo, el mouseup solo se dispara si el mouse está sobre el texbox, esto significa que no recoge un usuario pegando desde un menú contextual donde es probable que pegar fuera del alcance de la entrada de texto – jcvandan

+1

parece que los navegadores más recientes admiten eventos 'pegar' y 'ingresar', los agregué luego de encontrarlos aquí, [jquery - ¿Cómo detectar el clic derecho del mouse + pegar usando JavaScript?] (http: // stackoverflow.com/questions/441631/how-to-detect-right-mouse-click-paste-using-javascript)...heres the [updated fiddle] (http://jsfiddle.net/pxfunc/zJ7Lf/1/) – MikeM

+0

potencialmente útil pero no puede usarlos realmente si no tienen un soporte muy amplio. – jcvandan

21

he encontrado que esto funciona:

$(document).ready(function(){ 
    $('textarea').bind('input propertychange', function() { 
     //do your update here 
    } 

}) 
+0

Lo uso extensivamente para validar en línea con ajax. Creo que los nuevos eventos de mutación discutidos reemplazarán parte de esta funcionalidad, pero esta solución ha sido probada en Firefox, Chrome, IE 10 y Safari y se sabe que está funcionando. –

1

se puede lograr:

$(document).ready(function(){    
    $('#textBox').keyup(function() {alert('changed');}); 
}); 

o con el cambio (copiar pegar mango con clic derecho):

$(document).ready(function(){    
    $('#textBox2').change(function() {alert('changed');}); 
}); 

Aquí es Demo

+2

¿Qué pasa si alguien hace clic derecho y pega en el cuadro de texto? – jcvandan

+0

Revisar la demostración, su manejo copiar y pegar también –

+0

Sí, no se maneja pegar con el botón derecho y luego seleccionar – PandaWood

0
$('#input').on("input",function() {alert('changed');}); 

funciona para mí.