2012-04-22 11 views
21

Uso el modificador (controlador) para escuchar el cambio de eventos a un área de texto, pero solo recibo un evento cuando el área de texto pierde el foco, pero quiero recibir un evento tan pronto como cambie el valor.JQuery cambiar no disparar hasta desenfoque

$("#text_object").change(listener); 
function listener(dom){ 
alert("I'm not getting here before the textarea loses focus"); 
} 
+4

Parece que quieres 'keydown' o' keyup'. –

+0

He intentado con la tecla: http://stackoverflow.com/questions/10269571/form-event-incompatibilities-between-browsers-how-to-address –

Respuesta

22

Por desgracia, el navegador sólo reconoce un cambio cuando el campo difumina, lo que podría querer intentar adjuntar un oyente keyup. No es la solución más elegante, desafortunadamente.

Detalles en http://api.jquery.com/keyup/.

+8

Al utilizar la función de teclado, puede pegar texto con el mouse sin que se desencadene el evento. – Oscar

6

puede hacer esto. sólo asegúrese de que el área de texto da una etiqueta de identificación

$(document).ready(function(){ 
     $('.addtitle').keyup(function(event) { 
      if(event.keyCode==13) { 

} 
}); 
}); 

en mi caso aquí, im disparar la función de la tecla enter (como funciones facebooks).

EDIT: También si usted tiene más de un área de texto en una página, usted debe hacer esto:

$(document).ready(function(){ 
     $('textarea[name=mynamevalue]').keyup(function(event) { 
      if(event.keyCode==13) { 

} 
}); 
}); 
1

Aquí es lo que hago:

/* Get the current value of the input and save it 
* in a data attribute before any change is made to it */ 
$(document).on('keydown','input', function(){ 
    $(this).data('value',$(this).val()); 
}); 

/* Compare the values after the keyup event*/ 
$(document).on('keyup','input', function(){ 
    if($(this).data('value') != $(this).val()){ 
    console.log($(this).attr('name')); 
    } 
}); 

Así que el evento "keydown" se dispara antes de que la pulsación de tecla haga alguna modificación en el elemento al que se llama, se activa "keyup". Así que agarrar el valor antes y comparar el nuevo valor después, a continuación, voy a hacer lo que tenga que si hay un cambio ..

espero que esto ayude a

5

de acuerdo a la respuesta correcta aquí javascript change event on input element fires on only losing focus

usted debe hacer algo como esto

$('#name').on('change textInput input', function() { 
 
     
 
});

Sin embargo, encontramos que el tener tanto los eventos de entrada textInput y puede causar el evento para disparar dos veces, usted no quiere que, por lo que sólo lo hacen

$('#name').on('change input', function() { ...

+0

yup! eso es lo que necesito, funciona perfecto en cromo, pero no sé cómo funciona en otros broswers –

+0

¡Funciona como un amuleto! ¡Esta debería ser la respuesta aceptada! – luizrogeriocn

0

creé esto para usted, no es el más elegante solución, pero funciona

JS:

<script> 
$(document).ready(function (d) { 

    /* set initial value to "" (empty string), and not null 
     we're going to use this to check if the value of the current text field has been changed */ 
    val = ''; 

    setInterval(function() { 
     if (val !== $('textarea[name="checktext"]').val()) { 

      // Value is not the same, fire action 
      alert('val is different'); 

      // Update the current value 
      val = $('textarea[name="checktext"]').val(); 
     } else { 
      // Val is the same as textarea value 
     } 

    }, 50); 

}); 
</script> 

HTML:

<textarea name="checktext"></textarea> 

esta secuencia de comandos funcionará solo para ese área de texto específica, puede cambiar eso o puede configurar val para que sea una matriz de entradas de texto.

Sólo te estoy mostrando la idea detrás de ella, para usar setInterval de x milisegundos para comprobar si el valor de la entrada de texto es el mismo que el valor de la val o cualquier nombre de variable que desea utilizar. si no coinciden, significa que ha sido cambiado, si coinciden, significa que nada ha cambiado.

Espero que esto le resulte útil.

Sin embargo HTML5 tiene la solución

<script> 
$(document).ready(function (d) { 

    $('textarea[name="checktext"]').on('input', function() { 
     alert('changed'); 
    }); 
}); 
</script> 
0

Esta pregunta es viejo pero puede ayudar a la gente como yo;)
Puede setInterval() en el evento de selección de entrada y borrar este intervalo de desenfoque y relacionados función, creo que esta es una buena manera de captar el cambio de entrada por ti mismo.
Ejemplo:

var myInterval; 
$("#text_object").focus(function (event) { 
    myInterval = setInterval(function() {    
     listener(event); 
    }, 100); 
}); 

$("#text_object").blur(function (event) { 
    clearInterval(myInterval); 
}); 

function listener(event){ 
    clearInterval(myInterval); 

    alert("I'm not getting here before the textarea loses focus"); 
} 

espero que ayude.

Cuestiones relacionadas