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:
- Ocultar/mostrar campos de los importes preformateados y formateados.
- Cambiar el value del input «numero», que se formatee a «numeroFormat».
- Pulsar clic a input «numeroFormat» que aparezca el importe sin formatear en el input «numero» para añadir uno nuevo.
- Pulsar tecla en input, detectará que si pulsamos la tecla Intro o Tabulador, aparecerá el importe formateado
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();
});
});