<!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>
Crear cuenta
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};