Los eventos adecuados para detectar el cambio de un <input>
o un <textarea>
son beforeinput
(no soportado aún) e input
puede ser utilizado también.
Según la documentación en MDN:
El evento input es activado sincrónicamente cuando el valor de un elemento <input>
o <textarea>
cambió.
En cuanto a beforeinput
, se ejecuta antes de input
, como podemos ver en la especificación de W3, aunque no está del todo soportado.
Si vemos la documentación de keypress en MDN, el cual ya es un evento obsoleto, se sugiere utlizar el evento input
.
The keypress event is fired when a key is pressed down and that key normally produces a character value (use input instead).
Aquí se puede ver la referencia en W3 que indica que keypress es obsoleto y que en su lugar se debería utilizar beforeinput
:
The keypress event type is defined in this specification for reference and completeness, but this specification deprecates the use of this event type. When in editing contexts, authors can subscribe to the beforeinput event instead.
Pasando al código, la implementación es típica para el evento input:
$(function(){
$('input').on('input', function(){
console.log('hubo cambio: ' + $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="2">
<input type="number" value="3">
El problema de usar keypress
es que ocurre antes del cambio, por lo cual si necesitas obtener el nuevo valor para hacer un cálculo o alguna otra acción, no te servirá.