0

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:

introducir la descripción de la imagen aquí


Y si lo edito se pierde el formato:

introducir la descripción de la imagen aquí

De antemano gracias.

1 respuesta 1

0

Supongo que lo que capturas en tu [data-field='montoMeta'] es la característica de tu input el cual vas a formatear.

Bueno, yo haría esto, suponiendo que mi id sería monto:

$("#monto").on({
  "focus": function(event) {
    $(event.target).select();
  },
  "keyup": function(event) {
    $(event.target).val(function(index, value) {
      return value.replace(/\D/g, "")
        .replace(/([0-9])([0-9]{2})$/, '$1.$2')
        .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ",");
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input id="monto">

Como verás, continúa el formato que solicitas a pesar que ya formateas el número cuando lo obtienes.

Por otra parte, también te recomendaría usar NumberFormat, ya es soportado por muchos navegadores y puedes simplemente escoger el país y definir la salida con el formato que tendrá, ya que solo necesitas el punto décimal para trabajar.

let monto = document.getElementById('monto');

monto.addEventListener('input', () => {
  $('#salida').html(new Intl.NumberFormat('es-MX').format(monto.value))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="monto" value="10000">

<div id="salida"></div>

3
  • Muchas gracias por las respuestas, me base en ellas para poder aplicar el cambio y ya pude realizarlo, Se los agradezco mucho. Commented el 25 mar. 2021 a las 21:03
  • No te preocupes. Estamos para ayudarnos.
    – gaidyjg
    Commented el 25 mar. 2021 a las 21:05
  • Tu lo has dicho y gracias nuevamente Commented el 25 mar. 2021 a las 21:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.