con - detectar cambio en input jquery

JQuery: detectar cambio en el campo de entrada

Question

Posible duplicado:
Jquery: cómo detectar el contenido de un cuadro de texto ha cambiado

Quiero detectar cuando las acciones del teclado de un usuario alteran el valor de un campo de texto. Debería funcionar de manera consistente en los navegadores modernos.

La página de JQuery para el evento .keypress dice que no es consistente. Además, no funciona para retroceso, eliminación, etc.

No puedo usar .keydown como está porque reacciona a teclas shift, alt y flecha, etc. Además, no se dispara más de una vez cuando el usuario mantiene presionada una tecla y se insertan varios caracteres.

¿Hay un método conciso que me falta? ¿O debería usar .keydown y filtrar eventos que se desencadenan con las teclas de flecha, shift, etc.? Mi principal preocupación es que habrá claves que no sé que deberían filtrarse. (Casi me olvidé de alt y ctrl, supongo que podría haber otros) Pero entonces, ¿cómo detectaría la clave presionada e insertando varios caracteres?

Como beneficio adicional, detectaría los cambios debidos al pegado (incluido el clic derecho) pero tengo la solución para eso desde here .

Answer 1

Misma funcionalidad que recientemente logré usando la función siguiente.

Quise habilitar el botón GUARDAR en la edición.

1. El evento de cambio NO es aconsejable, ya que SÓLO se activará si después de la edición, se hace clic en el mouse en otro lugar en la página antes de hacer clic en el botón GUARDAR.
2. Key Press no maneja las opciones Retroceso, Eliminar y Pegar.
3. Key Up maneja todo, incluida la pestaña, la tecla Shift.

Por lo tanto, escribí a continuación la función que combina pulsación de tecla, teclados (para retroceso, eliminar) y pegar evento para campos de texto.

Espero que te ayude

function checkAnyFormFieldEdited() {
    /*
     * If any field is edited,then only it will enable Save button
     */
    $('':text'').keypress(function(e) { // text written
        enableSaveBtn();
    });

    $('':text'').keyup(function(e) {
        if (e.keyCode == 8 || e.keyCode == 46) { //backspace and delete key
            enableSaveBtn();
        } else { // rest ignore
            e.preventDefault();
        }
    });
    $('':text'').bind(''paste'', function(e) { // text pasted
        enableSaveBtn();
    });

    $(''select'').change(function(e) { // select element changed
        enableSaveBtn();
    });

    $('':radio'').change(function(e) { // radio changed
        enableSaveBtn();
    });

    $('':password'').keypress(function(e) { // password written
        enableSaveBtn();
    });
    $('':password'').bind(''paste'', function(e) { // password pasted
        enableSaveBtn();
    });


}

Answer 2

Puede usar la función jQuery change ()

$(''input'').change(function(){
  //your codes
});

Hay ejemplos sobre cómo usarlo en la página API: http://api.jquery.com/change/

Answer 3

Puede vincular el evento de ''entrada'' al cuadro de texto. Esto se activará cada vez que la entrada cambie, de modo que cuando pegue algo (incluso con un clic derecho), elimine y escriba cualquier cosa.

$(''#myTextbox'').on(''input'', function() {
    // do something
});

Si usa el controlador de change , este solo se activará después de que el usuario anule la selección del cuadro de entrada, que puede no ser lo que usted desea.

Hay un ejemplo de ambos aquí: http://jsfiddle.net/6bSX6/

Answer 4

Use $.on() para vincular su evento elegido a la entrada, no use los accesos directos como $.keydown() etc porque a partir de jQuery 1.7 $.on() es el método preferido para adjuntar controladores de eventos (consulte aquí: http://api.jquery.com/on/ y http://api.jquery.com/bind/ ).

$.keydown() es solo un acceso directo a $.bind(''keydown'') , y $.bind() es lo que $.on() reemplaza (entre otros).

Para responder a su pregunta, por lo que yo sé, a menos que necesite disparar un evento en keydown específicamente, el evento de change debería ser el truco para usted.

$(''element'').on(''change'', function(){
    console.log(''change'');
});

Para responder al siguiente comentario, el evento de change JavaScript está documentado aquí: https://developer.mozilla.org/en-US/docs/Web/Events/change

Y aquí hay un ejemplo de trabajo del evento de change trabajando en un elemento de entrada, usando jQuery: http://jsfiddle.net/p1m4xh08/

Answer 5

Utilice el evento de cambio jquery

Descripción: enlazar un controlador de eventos al evento de JavaScript "cambiar" o desencadenar ese evento en un elemento.

Un ejemplo

$("input[type=''text'']").change( function() {
  // your code
});

La ventaja que tiene .change sobre .keypress , .focus , .blur es que el evento .change se activará solo cuando la entrada haya cambiado