Crear campos espejo

Crear campos espejo
Ejemplo de campo espejo

Para poder operar con números formateados es un tanto complejo. Ya que en EEUU marcan los miles con comas y los decimales con puntos. En España hacemos justo lo contrario, y para calcular importes y añadirlos a una BBDD suele ser un quebradero de cabeza.

Por lo que una de las soluciones que alguna vez he tenido que acudir a este tipo de problemas es crear campos espejo.

¿Qué es un campo espejo?

En ámbitos más técnicos es realizar un GET y SET. Es decir, yo escribo datos en un campo con SET y recibo esos datos en el mismo o en otro) campo con GET. No sólo va a replicar lo que se escribe en un campo a otro, si no que podemos manipular el GET en este caso, vamos a formatear un número).

En el siguiente os muestro un ejemplo con el código podemos ver que introducimos un número y nos lo formatea con separando los miles y decimales.

 <!doctype html>
 <html>
   <head>
      <meta charset="utf-8"/>
      <title>Título de la web</title>    
   </head>
   <body>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
    $(document).ready(function(){
      $("#numero").change(function(){
        $("#numeroFormat").val(new Intl.NumberFormat('de-DE').format(parseFloat($("#numero").val()).toFixed(2)));
      });
    });
    </script>
    <div class="mx-auto" style="width: 500px;">
            <h3>Campos espejo</h3>
            <input type="text" id="numero" />
            <span class="badge badge-info"><h5>→</h5></span>
            <input type="text" id="numeroFormat" />        
    </div>    
   </body>
 </html>

Opcional: Una vez que vemos que formatea el número que hemos introducido y que lo muestra en otro campo, podemos realizar lo siguiente:

Para poder ver el funcionamiento del código sólo hay que sustituir el código JavaScript que está en las etiquetas <script></script>

    $(document).ready(function(){
    //Ocultamos por defecto el campo espejo
    $("#numeroFormat").hide();
    
    //Al añadir el importe en el campo origen
    $("#numero").change(function(){
        //Ocultar el campo origen y mostrar el campo espejo
        $("#numero").hide();
        $("#numeroFormat").show();
        //Y añadimos el valor del campo origen formateado al campo espejo
        $("#numeroFormat").val(new Intl.NumberFormat('de-DE').format(parseFloat($("#numero").val()).toFixed(2)));
    }).keypress(function(e) {
        //Si se pulsa a INTRO y TABULADOR
        var code = (e.keyCode ? e.keyCode : e.which);
        if(code.indexOf(13,9)>0){
            //Ocultamos origen y mostramos espejo
            $("#numero").hide();
            $("#numeroFormat").show();
        }
    });      
    //Al pulsar clic el campo espejo
      $("#numeroFormat").click(function(){
        //Ocultar el campo origen y mostrar el campo espejo
        $("#numeroFormat").hide();
        $("#numero").show();
      });      
      
    });

También te podría gustar...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies