<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
input {padding:20px;margin:10px;font-size:18px;}
.number {text-align:right;}
</style>
</head>
<body>
<div><input type="text" class="number"></div>
<div><input type="text" class="number"></div>
</body>
</html>
<script>
// Creamos el evento keyup
document.querySelectorAll(".number").forEach(el => el.addEventListener("keyup", numberFormat));
// Función que formatea el numero
function numberFormat(e) {
if (this.value.trim()=="" || this.value.trim()=="-") {
return;
}
// Obtenemos un array con el numero y los decimales si hay
let contenido = this.value.replace(/[^0-9\.]/g, "").split(".");
// añadimos los separadores de miles al primer numero del array
contenido[0] = contenido[0].length ? new Intl.NumberFormat('en-US').format(parseInt(contenido[0])) : "0";
// Juntamos el numero con los decimales si hay decimales
let resultado=contenido.length>1 ? contenido.slice(0, 2).join(".") : contenido[0];
this.value=this.value[0]=="-" ? "-"+resultado : resultado;
}
</script>
Comentarios sobre la versión: Permite numeros negativos (4)
Yo añadiría las siguientes funcionalidades para formatear números según se escriben.
(integers) Enteros Indistintos (+/-) (no permite el signo "." de decimales)
(integers) Enteros Positivos (+)>=0 ( no permite el signo "." de decimales, no permite el signo"-" de negativos)
(Float) Números Indistintos (+/-) con 2 decimales fijos (después de introducir el "." solo se pueden introducir 2 cifras)
(Float) Números Positivos (+)>=0 con 2 decimales fijos (no permite el signo"-" de negativos, después de introducir el "." solo se pueden introducir 2 cifras)
Una opción (por ejemplo con una variable global) para distinguir entre sistemas que utilizan el signo "coma" para separar miles y el "punto" para separar decimales de otro sistema que utiliza el "punto" para separar miles y la "coma" para separar decimales.
JSFiddle
//variables globales para definir el separador de millares y decimales
//Para coma millares y punto en decimales (USA)
//Para coma decimal y punto en millares (ESPAÑA)
//const MILLARES=".";
//const DECIMALES=",";
//const DTFLOCAL = new Intl.NumberFormat('es-ES');
// Formatear numeros enteros indistintamente tanto positivos como negativos
}
// Obtenemos un array con el numero y los decimales si hay
// añadimos los separadores de miles al primer numero del array
// Juntamos el numero con los decimales si hay decimales
}
//damos color rojo si numero negativo
}
// Formatear solamente numeros enteros positivos
}
// Obtenemos un array con el numero y los decimales si hay
// añadimos los separadores de miles al primer numero del array
// Juntamos el numero con los decimales si hay decimales
}
// Formatear numeros decimales indistintamente tanto positivos como negativos
}
// Obtenemos un array con el numero y los decimales si hay
}
// añadimos los separadores de miles al primer numero del array
// Juntamos el numero con los decimales si hay decimales
}
//damos color rojo si numero negativo
}
// Formatear solamente numeros decimales positivos
}
// Obtenemos un array con el numero y los decimales si hay
}
// añadimos los separadores de miles al primer numero del array
// Juntamos el numero con los decimales si hay decimales
}
// Formatear numeros decimales indistintamente tanto positivos como negativos con solo 2 decimales
}
// Obtenemos un array con el numero y los decimales si hay
}
//ver si hay ya 2 decimales introducidos
}
}
// añadimos los separadores de miles al primer numero del array
// Juntamos el numero con los decimales si hay decimales
}
//damos color rojo si numero negativo
}
// Formatear solamente numeros decimales positivos con solo 2 decimales
}
// Obtenemos un array con el numero y los decimales si hay
}
//ver si hay ya 2 decimales introducidos
}
}
// añadimos los separadores de miles al primer numero del array
// Juntamos el numero con los decimales si hay decimales
}
//SE EJECUTA DESPUES CARGAR EL CODIGO CSS y HTML
// Creamos el evento keyup
};
Espero que sea de utilidad.
Espero que no te importe mi colaboración para perfeccionar la rutina.
Ultima versión con corrección para el formato en España y en USA
Probar en : JSFiddle
input {
padding: 20px;
margin: 10px;
}
}
color: black;
}
color: red;
}
//variables globales para definir el separador de millares y decimales
//Para coma millares y punto en decimales (USA)
// cambiar por "," para coma decimal y punto en millares (ESPAÑA)
//============================================================================
//============================================================================
// Formatear numeros enteros indistintamente tanto positivos como negativos
//ver si el primer caracter es el simbolo minus "-"
//si hay caracter negativo al inicio se quita del proceso de formateo
//se filtra el contenido de caracteres no admisibles
// añadimos los separadores de miles
// Juntamos el signo "-" minus si existe
}
//damos color rojo si el numero es negativo
}
}
// Formatear solamente numeros enteros positivos
//se filtra el contenido de caracteres no admisibles
// añadimos los separadores de miles al numero
}
}
// Formatear numeros decimales indistintamente tanto positivos como negativos
//ver si el primer caracter es el simbolo minus "-"
//si hay caracter negativo al inicio se quita del proceso de formateo
//se filtra el contenido de caracteres no admisibles
//se divide el numero entre la parte entera y la parte decimal
// añadimos los separadores de miles a la parte entera del numero
// Juntamos el numero con los decimales si hay decimales
// Juntamos el signo "-" minus si existe
}
//damos color rojo si numero negativo
}
}
// Formatear solamente numeros decimales positivos
//se filtra el contenido de caracteres no admisibles
//se divide el numero entre la parte entera y la parte decimal
// añadimos los separadores de miles al primer numero del array
// Juntamos el numero con los decimales si hay decimales
}
}
// Formatear numeros decimales indistintamente tanto positivos como negativos con solo 2 decimales
//ver si el primer caracter es el simbolo minus "-"
//si hay caracter negativo al inicio se quita del proceso de formateo
//se filtra el contenido de caracteres no admisibles
//se divide el numero entre la parte entera y la parte decimal
//ver si hay ya 2 decimales introducidos
}
}
// añadimos los separadores de miles a la parte entera del numero
// Juntamos el numero con los decimales si hay decimales
// Juntamos el signo "-" minus si existe
}
//damos color rojo si numero negativo
}
}
// Formatear solamente numeros decimales positivos con solo 2 decimales
//se filtra el contenido de caracteres no admisibles
//se divide el numero entre la parte entera y la parte decimal
//ver si hay ya 2 decimales introducidos
}
}
// añadimos los separadores de miles a la parte entera del numero
// Juntamos el numero con los decimales si hay decimales
}
}
//SE EJECUTA DESPUES CARGAR EL CODIGO CSS y HTML
// Creamos el evento keyup para cada clase definida
};