jQuery: ¿Necesito eventos keyUp y change?

3 minutos de lectura

avatar de usuario
Ionut Flavio Pogacian

Tengo una página con 2 formularios; cada formulario tiene un campo de texto de entrada;

El valor encontrado en el texto de entrada del primer formulario debe ser el mismo que el valor encontrado en el texto de entrada del segundo formulario;

Cuando el valor cambia, el otro campo de texto de entrada también modifica su valor;

¿Debo usar ambos? onkeyup y onchange ¿eventos?

Si no, ¿cuál es el adecuado para usar?

Estoy preguntando esto porque parece que tengo 2 solicitudes de publicación, y creo que es por eso.

   $('input.searchbox').keyup( function(){
       $('input.txtfieldsearch').val($('input.searchbox').val());
       listViewUpdate();
       $('input.txtfieldsearch').trigger("keyup");
   });
                
    $('input.txtfieldsearch').keyup( function(){
       $('input.searchbox').val($('input.txtfieldsearch').val());
       listViewUpdate();
    });
                
   $('input.searchbox').change( function(){
       $('input.txtfieldsearch').val($('input.searchbox').val());
       listViewUpdate();
       $('input.txtfieldsearch').trigger("change");
   });
                
    $('input.txtfieldsearch').change( function(){
       $('input.searchbox').val($('input.txtfieldsearch').val());
       listViewUpdate();
    });

  • pero cual es el derecho a usar?

    – Ionut Flavio Pogacian

    18 de abril de 2013 a las 11:55

  • cuando tu desear los valores a actualizar? change y keyup son eventos diferentes, y puede usar ambos.

    – Bergi

    18 de abril de 2013 a las 11:56

  • ¿Notaste que estás llamando? listViewUpdate dos veces desde el searchbox?

    – Bergi

    18/04/2013 a las 12:00

  • Sí, lo hice; 1º para llave; 2do por cambio

    – Ionut Flavio Pogacian

    18 de abril de 2013 a las 12:01

  • No, quise decir dos veces para cada evento. Activas el controlador en el txtfieldsearch también que se ejecutará listViewUpdate otra vez.

    – Bergi

    18 de abril de 2013 a las 12:02

avatar de usuario
rigobcastro

Puedes usar $.on() funcionar y adjuntar manipuladores de múltiplos.

$("#element").on('keyup change', function (){
   // Your stuff...
});

  • esto llama a la devolución de llamada del evento dos veces.

    – Robin

    23 de enero de 2019 a las 5:56

  • Nunca encontré una solución que no llamara la devolución de llamada del evento dos veces. Eventualmente me decidí por un truco para eliminar las flechas de incremento de mi entrada usando css, lo que fuerza el uso de teclas en mi caso: /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; }

    -Kevin Walker

    20 de junio de 2020 a las 0:55


Puede usar solo el evento de “entrada” si no necesita proporcionar soporte para los navegadores más antiguos. Se activará cada vez que cambie un valor en el elemento de entrada. Aquí hay una lista de los navegadores compatibles: https://developer.mozilla.org/en-US/docs/Web/Events/input

avatar de usuario
SeinopSys

onkeyup se dispara principalmente cuando el usuario presiona una tecla y luego la suelta. onchange puede ocurrir si el usuario utiliza la función de autocompletar del navegador. Deberías usar el .on() método para capturar ambos eventos, por si acaso:

$('input.searchbox').on('keyup change', function(e){
    $('input.txtfieldsearch').val($('input.searchbox').val());
    listViewUpdate();
    $('input.txtfieldsearch').trigger(e.type);
});

$('input.txtfieldsearch').on('keyup change', function(){
    $('input.searchbox').val($('input.txtfieldsearch').val());
    listViewUpdate();
});

Si quieres reaccionar al cambio, debes usar change.

Hay algunas ocasiones en las que una tecla no hace un cambio (como el cambio) y ocasiones en las que hay un cambio sin una tecla (pegar).

¿Ha sido útil esta solución?