Tengo un input text en jQuery. Quiero saber si es posible obtener el valor de ese input text ( type=number y type=text ) antes de que onchange el cambio y también obtener el valor del mismo texto de entrada de entrada después de que ocurra el cambio. . Esto es usando jQuery.
Lo que probé:
Intenté guardar el valor en la variable y luego llamar a ese valor dentro de onchange, pero obtengo un valor en blanco.
La forma más sencilla es guardar el valor original usando data() cuando el elemento recibe el foco. Aquí hay un ejemplo realmente básico:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/e4ovx435/
$('input').on('focusin', function(){ console.log("Saving value " + $(this).val()); $(this).data('val', $(this).val()); }); $('input').on('change', function(){ var prev = $(this).data('val'); var current = $(this).val(); console.log("Prev value " + prev); console.log("New value " + current); });Nota: por lo general, es más eficaz utilizar un controlador de eventos delegado cuando puede haber varios elementos coincidentes. De esta manera, solo se agrega un único controlador (menor sobrecarga e inicialización más rápida) y cualquier diferencia de velocidad en el momento del evento es insignificante.
Aquí está el mismo ejemplo usando eventos delegados conectados a document :
$(document).on('focusin', 'input', function(){ console.log("Saving value " + $(this).val()); $(this).data('val', $(this).val()); }).on('change','input', function(){ var prev = $(this).data('val'); var current = $(this).val(); console.log("Prev value " + prev); console.log("New value " + current); });JsFiddle: http://jsfiddle.net/TrueBlueAussie/e4ovx435/65/
Los eventos delegados funcionan escuchando un evento ( focusin , change , etc.) en un elemento principal ( document * en este caso), luego aplicando el filtro jQuery ( input ) solo a los elementos en la cadena de burbujas y luego aplicando la función solo a los que coinciden Elementos que causaron el evento .
*Nota: como regla general, use document como predeterminado para eventos delegados y no body . body tiene un error, relacionado con el estilo, que puede hacer que no obtenga eventos de mouse con burbujas. Además, el document siempre existe para que pueda adjuntarlo fuera de un controlador listo para DOM :)
Definitivamente, deberá almacenar el valor anterior manualmente, según el momento que le interese (antes de enfocar, desde el último cambio). El valor inicial se puede tomar de la propiedad defaultValue:
function onChange() { var oldValue = this.defaultValue; var newValue = this.value; }El valor antes de enfocar se puede tomar como se muestra en la respuesta de Gone Coding. Pero hay que tener en cuenta que el valor se puede cambiar sin enfocar.
Simplemente coloque el valor inicial en un atributo de datos cuando cree el cuadro de texto, por ejemplo
HTML
<input id="my-textbox" type="text" data-initial-value="6" value="6" />JQuery
$("#my-textbox").change(function () { var oldValue = $(this).attr("data-initial-value"); var newValue = $(this).val(); });