Crear campos espejo

Alfredo
Sígueme!
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();
      });      
      
    });

Alfredo

Desarrollador web de profesión (.NET, jQuery, JavaScript y SQL Server). Amante del fútbol y los videojuegos. Escribo en este blog sobre temas de programación que me parecen interesantes y que quiero compartir con todo el mundo.

También te podría gustar...

Deja una respuesta

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
A %d blogueros les gusta esto: