¿Cuál es la mejor manera de detectar un cambio en un cuadro de texto HTML?

Todos esos eventos significan cosas ligeramente diferentes, por lo que el que elija dependerá del comportamiento exacto que desee. A juzgar por los detalles de su pregunta, supongo que el que está buscando es la input .

Los eventos denominados keyup y keydown disparan cuando cualquier tecla se suelta y se presiona, respectivamente. El evento de keypress similar se keypress cuando se presiona y luego se suelta una tecla, pero solo se activa mediante teclas que generalmente ingresan valores (como teclas de letras) y no mediante retroceso / eliminación o teclas modificadoras como Shift y Ctrl.

Existe cierta inconsistencia en qué eventos capturan qué y dónde lo almacenan en el evento, por lo que puede ser útil leer los detalles si es absolutamente necesario capturar la entrada clave por clave. Obtendrá ayuda de jQuery para normalizar los objetos de Evento, pero no si está escuchando la elección incorrecta de los tres en primer lugar. [1] [2]

El evento de change se activa cuando el usuario actualiza el valor del campo de texto y también hace alguna indicación de que está listo y listo para continuar, en este caso moviendo el foco a otro elemento o campo. En otras palabras, puede considerarlo más como un ahorro atómico: realmente no le importa qué teclas puede presionar el usuario mientras escribe, pero se da cuenta cuando termina de hacer cambios e intenta “comprometerse” ellos avanzando. Si te encuentras ignorando muchos eventos clave porque estás más interesado en el valor final, este evento podría ser una mejor opción.

Este no está en su lista, pero también hay un evento de input que se activa cada vez que se agrega o elimina texto por cualquier medio. (Creo que habría tenido más sentido llamar a este cambio y a la otra entrada , pero es un hecho bien conocido que los ingenieros frontend no pueden tener cosas buenas). Lo bueno de la input es que capta limpiamente cosas extrañas como la copia / pegar, y también se comporta como cabría esperar para algunos de los nuevos y elegantes tipos de entrada en HTML 5. [3] La desventaja es que tiene errores en IE (sin capturar eliminaciones) y no admitido antes de la versión 9.


[1] Una herramienta ordenada para experimentar: JavaScript Key Event Tester

[2] Tenga en cuenta que leer el valor del campo en una keypress keydown o en el controlador de keypress devolverá el valor que estaba allí antes de presionar la tecla.

[3] No puedo decir que lo haya probado para todos ellos, pero es particularmente bueno para input type="number" .

Si necesita hacer esto, puede valer la pena considerar un Frameworks de JavaScript que maneje el enlace de datos. Knockout (biblioteca de JavaScript) es el más simple ya que se centra en ese requisito.

Al usar el método jQuery .change () puede detectar cualquier cambio en los controles de su cuadro de texto. Es elegante y simple. Aquí hay un ejemplo.