Detección de cambio de valor de entrada [tipo = texto] en jQuery

159

Quiero ejecutar una función cada vez que cambie el valor de un cuadro de entrada específico. Es casi trabaja con $('input').keyup(function), pero no pasa nada al pegar texto en el cuadro, por ejemplo. $input.change(function)solo se activa cuando la entrada está borrosa, entonces, ¿cómo podría saber de inmediato cada vez que un cuadro de texto ha cambiado de valor?

Jeriko
fuente
2
Entonces, ¿por qué no unir los dos keyupy los pasteeventos?
Ilia G
devcurry.com/2009/07/… - Detectando eventos de cortar / copiar / pegar
BeRecursive
2
@ liho1eye pastees solo uno en el que pensé, prefiero escuchar un cambio definitivo que tener que pensar en todas las diferentes rutas entrantes.
Jeriko
@ Jeriko Esa es la única forma en que se puede cambiar el valor (además de la actualización obvia a través del código js).
Ilia G
También quieres capturar Ctlr-X ( cut).
Alexis Wilke

Respuestas:

344

solo recuerde que 'on' se recomienda sobre la función 'bind', así que siempre trate de usar un detector de eventos como este:

$("#myTextBox").on("change paste keyup", function() {
   alert($(this).val()); 
});
Alejandro Silva
fuente
¿Por qué pastesin embargo? Primero pensé que solo funcionaría si pegamos algo con CTRL+V.
Negro
3
@ NicolasS.Xu: la asignación directa de valores no activa ningún evento DOM
Alejandro Silva
Sería aún mejor si se usa en console.log()lugar de alert. Sería muy molesto para keyup alert.
cytsunny
44
@cytsunny sí, claro, la alerta es molesta, pero en este caso es un ejemplo del código que se ejecutará en el cambio de valor, realmente puede ser cualquier carga útil que desee.
Alejandro Silva
1
Si hace clic derecho y pega, esto devolverá el valor de la entrada antes de pegar.
también
104

Descripción

Puede hacer esto usando el .bind()método de jQuery . Mira el jsFiddle .

Muestra

HTML

<input id="myTextBox" type="text"/>

jQuery

$("#myTextBox").bind("change paste keyup", function() {
   alert($(this).val()); 
});

Más información

dknaack
fuente
6

también puedes usar eventos de cuadro de texto -

<input id="txt1" type="text" onchange="SetDefault($(this).val());" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">

function SetDefault(Text){
  alert(Text);
}

Prueba esto

Ishan Jain
fuente
5

Prueba esto:

Básicamente, solo cuenta para cada evento:

HTML:

<input id = "textbox" type = "text">

Jquery:

$("#textbox").keyup(function() { 
    alert($(this).val());  
}); 

$("#textbox").change(function() { 
alert($(this).val());  
}); 
H Bellamy
fuente
3
$("#myTextBox").on("change paste keyup select", function() {
     alert($(this).val());
});

seleccione para sugerencia del navegador

mohamad yazdanpanah
fuente
2

Prueba esto:

$("input").bind({
            paste : function(){
                $('#eventresult').text('paste behaviour detected!');
            }
})
Hamed Khosravi
fuente
0

Use esto: https://github.com/gilamran/JQuery-Plugin-AnyChange

Maneja todas las formas de cambiar la entrada, incluido el menú de contenido (Usando el mouse)

gilamran
fuente
¿Como lo usas? Lo incluí en mi HTML y usé $ ("input"). AnyChange (function (e) {console.log (e);}); Pero nunca llegó a la línea de console.log
Ofer Gal
0

Esta combinación de eventos funcionó para mí:

$("#myTextBox").on("input paste", function() {
   alert($(this).val()); 
});
Nole
fuente
0

NO OLVIDE LA cuto selecteventos!

La respuesta aceptada es casi perfecta, pero olvida los eventos cuty select.

cut se dispara cuando el usuario corta el texto (CTRL + X o mediante clic derecho)

select se activa cuando el usuario selecciona una opción sugerida por el navegador

También debe agregarlos, como tal:

$("#myTextBox").on("change paste keyup cut select", function() {
   //Do your function 
});
Oscar Chambers
fuente