Buen día comunidad.
Tengo un Template de Thymeleaf y en un input recibe un dato entero que viene de un servicio en spring, el dato llega como un entero y con jquery ya se parsea a un formato en moneda, llega así(ejemplo): 200000
, y ese valor con jquery se vuelve así en el input -> 200,000.00
.
Hasta ahí todo bien pero si yo quiero editar ese input quiero que ese parseo se conserve, si tengo el valor de -> 200,000.00 y yo lo edito se pierde el formato(se quita, las comas y el punto).
Investigando encontré que con la función de keypress
de JQuery puedo solucionar esto solo que en esa parte no he podido hacer que si por ejemplo tengo 200,000.00
y yo edito ese input a no se unos 50,000.00
los edite sin tener que poner la coma ni el punto .
Mi código:
$(function(){
console.log("Document.ready: Documento listo");
$().ready(function() {
num=$("[data-field='montoMeta']").val();
console.log("Valor Antes del Cambio");
console.log(num);
var numero = parseInt(num);
var formatoNumero = function(numero) {
var cadena = numero.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return cadena.indexOf("-") != -1 ? "-$" + cadena.replace("-", "") : cadena;
};
var numeroSalida = formatoNumero(numero);
console.log("Valor Despues del Cambio");
console.log(numeroSalida);
var valorRecuperado = numeroSalida.toString();
console.log("Valor Regresado a String..");
console.log(valorRecuperado);
$("[data-field='montoMeta']").val(valorRecuperado);
console.log(" = Cambio!! . Key...... ");
// -- keypress JQuery
$().keypress(function(){
console.log("Metodo KeyPress")
var obtenerKey=$("[data-field='montoMeta']").val();
console.log(obtenerKey);
var formatoNumero = function(numero) {
var cadena = numero.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return cadena.indexOf("-") != -1 ? "-$" + cadena.replace("-", "") : cadena;
};
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-4">
<label for="montoMeta"><small>Valor de tu meta</small></label>
<input type="text" class="form-control p17-input" data-field="montoMeta" value="$25,000,000.00 MXN" th:value="${fondo.tuNumero}">
</div>
Anexo de como se parsea el dato:
Y si lo edito se pierde el formato:
De antemano gracias.