Crear campos espejo

Facebook
Twitter
LinkedIn
WhatsApp
Campos espejo

Table of Contents

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();
      });      
      
    });
Facebook
Twitter
LinkedIn

Deja un comentario

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

Scroll al inicio