Código de JavaScript - Añadir separadores de miles mientras escribes con JavaScript

Imágen de perfil
Val: 387
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Añadir separadores de miles mientras escribes con JavaScriptgráfica de visualizaciones


JavaScript

Actualizado el 13 de Enero del 2021 por Info (89 códigos) (Publicado el 12 de Enero del 2021)
254 visualizaciones desde el 12 de Enero del 2021
Función de javascript que va modificando el numero introducido en un campo de texto para ir añadiendo los separadores de miles mientras el usuario va añadiendo valores.
Permite especificar decimales

anadir-separadores-de-miles-con-javascript

Solo numeros positivos

Actualizado el 13 de Enero del 2021 (Publicado el 12 de Enero del 2021)gráfica de visualizaciones de la versión: Solo numeros positivos
94 visualizaciones desde el 12 de Enero del 2021

Permite numeros negativos
estrellaestrellaestrellaestrellaestrella(4)

Publicado el 13 de Enero del 2021gráfica de visualizaciones de la versión: Permite numeros negativos
160 visualizaciones desde el 13 de Enero del 2021
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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)

Imágen de perfil
Hace 4d
estrellaestrellaestrellaestrellaestrella
Hola Joel

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.
Responder
Imágen de perfil
Hace 4d
estrellaestrellaestrellaestrellaestrella
Solución a lo expuesto en el anterior mensaje para probar en:

JSFiddle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            input {padding: 20px;margin: 10px;font-size: 18px;}
            .label,
            .integerPositivo,
            .integerIndistinto,
            .numberPositivo,
            .numberIndistinto,
            .numberPositivoFixed,
            .numberIndistintoFixed {text-align: right;}
            .positivos {color: black;}
            .negativos {color: red;}
        </style>
    </head>
    <body>
        <h2>FORMATEAR UN INPUT NUMERICO SEGUN SE TECLEA UN VALOR</h2>
        <table>
            <tr>
                <td class="label">Integer(+/-)</td>
                <td><input class="integerIndistinto"></td>
            </tr>
            <tr>
                <td class="label">Integer(+)&gt;= 0</td>
                <td><input class="integerPositivo"></td>
            </tr>
            <tr>
                <td class="label">Float(+/-)</td>
                <td><input class="numberIndistinto"></td>
            </tr>
            <tr>
                <td class="label">Float(+)&gt;= 0</td>
                <td><input class="numberPositivo"></td>
            </tr>
            <tr>
                <td class="label">Float Fixed 2 (+/-)</td>
                <td><input class="numberIndistintoFixed"></td>
            </tr>
            <tr>
                <td class="label">Float Fixed 2 (+)&gt;= 0</td>
                <td><input class="numberPositivoFixed"></td>
            </tr>
        </table>
        <script>
            //variables globales para definir el separador de millares y decimales
            //Para coma millares y punto en decimales (USA)
            const MILLARES=",";
            const DECIMALES=".";
            const DTFLOCAL = new Intl.NumberFormat('en-US');
            //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
            function integerFormatIndistinto(e) {
                if (this.value === "") {
                    return;
                }
                // Obtenemos un array con el numero y los decimales si hay
                let caracterInicial = this.value.substring(0, 1);
                let contenido = (caracterInicial === "-") ? this.value.substring(1, this.value.length).replace(/[^0-9]/g, "") : this.value.replace(/[^0-9]/g, "");
                // añadimos los separadores de miles al primer numero del array
                contenido = contenido.length ? DTFLOCAL.format(parseInt(contenido)) : "0";
                // Juntamos el numero con los decimales si hay decimales
                this.value = contenido.length ? contenido : "0";
                if (caracterInicial === "-") {
                    this.value = caracterInicial + this.value;
                }
                //damos color rojo si numero negativo
                this.className = (this.value.substring(0, 1) !== "-") ? "numberIndistinto positivos" : "numberIndistinto negativos";
            }
            // Formatear solamente numeros enteros positivos
            function integerFormatPositivo(e) {
                if (this.value === "") {
                    return;
                }
                // Obtenemos un array con el numero y los decimales si hay
                let contenido = this.value.replace(/[^0-9]/g, "");
                // añadimos los separadores de miles al primer numero del array
                contenido = contenido.length ? DTFLOCAL.format(parseInt(contenido)) : "0";
                // Juntamos el numero con los decimales si hay decimales
                this.value = contenido.length ? contenido : "0";
            }
            // Formatear numeros decimales indistintamente tanto positivos como negativos
            function numberFormatIndistinto(e) {
                if (this.value === "") {
                    return;
                }
                // Obtenemos un array con el numero y los decimales si hay
                let caracterInicial = this.value.substring(0, 1);
                let contenido="";
                if (MILLARES===","){
                    contenido = (caracterInicial === "-") ? this.value.substring(1, this.value.length).replace(/[^0-9\.]/g, "").split(".") : this.value.replace(/[^0-9\.]/g, "").split(".");
                }else{
                    contenido = (caracterInicial === "-") ? this.value.substring(1, this.value.length).replace(/[^0-9\,]/g, "").split(",") : this.value.replace(/[^0-9\,]/g, "").split(",");
                }
                // añadimos los separadores de miles al primer numero del array
                contenido[0] = contenido[0].length ? DTFLOCAL.format(parseInt(contenido[0])) : "0";
                // Juntamos el numero con los decimales si hay decimales
                this.value = contenido.length > 1 ? contenido.slice(0, 2).join(".") : contenido[0];
                if (caracterInicial === "-") {
                    this.value = caracterInicial + this.value;
                }
                //damos color rojo si numero negativo
                this.className = (this.value.substring(0, 1) !== "-") ? "numberIndistinto positivos" : "numberIndistinto negativos";
            }
            // Formatear solamente numeros decimales positivos
            function numberFormatPositivo(e) {
                if (this.value === "") {
                    return;
                }
                // Obtenemos un array con el numero y los decimales si hay
                let contenido="";
                if (MILLARES===","){
                    contenido =  this.value.replace(/[^0-9\.]/g, "").split(".");
                }else{
                    contenido =  this.value.replace(/[^0-9\,]/g, "").split(",");
                }
                // añadimos los separadores de miles al primer numero del array
                contenido[0] = contenido[0].length ? DTFLOCAL.format(parseInt(contenido[0])) : "0";
                // Juntamos el numero con los decimales si hay decimales
                this.value = contenido.length > 1 ? contenido.slice(0, 2).join(".") : contenido[0];
            }
            // Formatear numeros decimales indistintamente tanto positivos como negativos con solo 2 decimales
            function numberFormatIndistintoFixed(e) {
                if (this.value === "") {
                    return;
                }
                // Obtenemos un array con el numero y los decimales si hay
                let caracterInicial = this.value.substring(0, 1);
                let contenido="";
                if (MILLARES===","){
                    contenido = (caracterInicial === "-") ? this.value.substring(1, this.value.length).replace(/[^0-9\.]/g, "").split(".") : this.value.replace(/[^0-9\.]/g, "").split(".");
                }else{
                    contenido = (caracterInicial === "-") ? this.value.substring(1, this.value.length).replace(/[^0-9\,]/g, "").split(",") : this.value.replace(/[^0-9\,]/g, "").split(",");
                }
               //ver si hay ya 2 decimales introducidos
                if (contenido.length > 1) {
                    if (contenido[1].length > 2) {
                        contenido[1] = contenido[1].substring(0, contenido[1].length - 1);
                    }
                }
                // añadimos los separadores de miles al primer numero del array
                contenido[0] = contenido[0].length ? DTFLOCAL.format(parseInt(contenido[0])) : "0";
                // Juntamos el numero con los decimales si hay decimales
                this.value = contenido.length > 1 ? contenido.slice(0, 2).join(".") : contenido[0];
                if (caracterInicial === "-") {
                    this.value = caracterInicial + this.value;
                }
                //damos color rojo si numero negativo
                this.className = (this.value.substring(0, 1) !== "-") ? "numberIndistinto positivos" : "numberIndistinto negativos";
            }
            // Formatear solamente numeros decimales positivos con solo 2 decimales
            function numberFormatPositivoFixed(e) {
                if (this.value === "") {
                    return;
                }
                // Obtenemos un array con el numero y los decimales si hay
                let contenido="";
                if (MILLARES===","){
                    contenido = this.value.replace(/[^0-9\.]/g, "").split(".");
                }else{
                    contenido = this.value.replace(/[^0-9\,]/g, "").split(",");
                }
                //ver si hay ya 2 decimales introducidos
                if (contenido.length > 1) {
                    if (contenido[1].length > 2) {
                        contenido[1] = contenido[1].substring(0, contenido[1].length - 1);
                    }
                }
                // añadimos los separadores de miles al primer numero del array
                contenido[0] = contenido[0].length ? DTFLOCAL.format(parseInt(contenido[0])) : "0";
                // Juntamos el numero con los decimales si hay decimales
                this.value = contenido.length > 1 ? contenido.slice(0, 2).join(".") : contenido[0];
            }
            window.onload = function() {
                //SE EJECUTA DESPUES CARGAR EL CODIGO CSS y HTML
                // Creamos el evento keyup
                document.querySelectorAll(".integerIndistinto").forEach(el => el.addEventListener("keyup", integerFormatIndistinto));
                document.querySelectorAll(".integerPositivo").forEach(el => el.addEventListener("keyup", integerFormatPositivo));
                document.querySelectorAll(".numberIndistinto").forEach(el => el.addEventListener("keyup", numberFormatIndistinto));
                document.querySelectorAll(".numberPositivo").forEach(el => el.addEventListener("keyup", numberFormatPositivo));
                document.querySelectorAll(".numberIndistintoFixed").forEach(el => el.addEventListener("keyup", numberFormatIndistintoFixed));
                document.querySelectorAll(".numberPositivoFixed").forEach(el => el.addEventListener("keyup", numberFormatPositivoFixed));
            };
        </script>
    </body>
</html>

6NBQ1Bo

Espero que sea de utilidad.
Responder
Imágen de perfil
Hace 4d
estrellaestrellaestrellaestrellaestrella
Hola Joel
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>FORMATEAR UN INPUT NUMERICO SEGUN SE TECLEA UN VALOR</title>
        <style>
            input {
                padding: 20px;
                margin: 10px;
                font-size: 18px;
            }
            .label,
            .integerPositivo,
            .integerIndistinto,
            .numberPositivo,
            .numberIndistinto,
            .numberPositivoFixed,
            .numberIndistintoFixed {
                text-align: right;
            }
            .positivos {
                color: black;
            }
            .negativos {
                color: red;
            }
        </style>
    </head>
    <body>
        <h2>FORMATEAR UN INPUT NUMERICO SEGUN SE TECLEA UN VALOR</h2>
        <table>
            <tr>
                <td class="label">Integer(+/-)</td>
                <td><input class="integerIndistinto"></td>
            </tr>
            <tr>
                <td class="label">Integer(+)&gt;= 0</td>
                <td><input class="integerPositivo"></td>
            </tr>
            <tr>
                <td class="label">Float(+/-)</td>
                <td><input class="numberIndistinto"></td>
            </tr>
            <tr>
                <td class="label">Float(+)&gt;= 0</td>
                <td><input class="numberPositivo"></td>
            </tr>
            <tr>
                <td class="label">Float Fixed 2 (+/-)</td>
                <td><input class="numberIndistintoFixed"></td>
            </tr>
            <tr>
                <td class="label">Float Fixed 2 (+)&gt;= 0</td>
                <td><input class="numberPositivoFixed"></td>
            </tr>
        </table>
        <script>
            //variables globales para definir el separador de millares y decimales
            //Para coma millares y punto en decimales (USA)
            const DECIMALES=".";
            // cambiar por "," para coma decimal y punto en millares (ESPAÑA)
            const INFLOCAL = DECIMALES==="."?new Intl.NumberFormat('en-US'):new Intl.NumberFormat('es-ES');
            //============================================================================
            let regexpInteger = new RegExp('[^0-9]', 'g');
            let regexpNumber = new RegExp('[^0-9' + '\\' + DECIMALES + ']', 'g');
            //============================================================================
            // Formatear numeros enteros indistintamente tanto positivos como negativos
            function integerFormatIndistinto(e) {
                if (this.value !== "") {
                    //ver si el primer caracter es el simbolo minus "-"
                    let caracterInicial = this.value.substring(0, 1);
                    //si hay caracter negativo al inicio se quita del proceso de formateo
                    //se filtra el contenido de caracteres no admisibles
                    let contenido = caracterInicial === "-" ? this.value.substring(1, this.value.length).replace(regexpInteger, "") : this.value.replace(regexpInteger, "");
                    // añadimos los separadores de miles
                    contenido = contenido.length ? INFLOCAL.format(parseInt(contenido)) : "0";
                    this.value = contenido.length ? contenido : "0";
                    // Juntamos el signo "-" minus si existe
                    if (caracterInicial === "-") {
                        this.value = caracterInicial + this.value;
                    }
                    //damos color rojo si el numero es negativo
                    this.className = this.value.substring(0, 1) !== "-" ? "numberIndistinto positivos" : "numberIndistinto negativos";
                }
            }
            // Formatear solamente numeros enteros positivos
            function integerFormatPositivo(e) {
                if (this.value !== "") {
                    //se filtra el contenido de caracteres no admisibles
                    let contenido = this.value.replace(regexpInteger, "");
                    // añadimos los separadores de miles al numero
                    contenido = contenido.length ? INFLOCAL.format(parseInt(contenido)) : "0";
                    this.value = contenido.length ? contenido : "0";
                }
            }
            // Formatear numeros decimales indistintamente tanto positivos como negativos
            function numberFormatIndistinto(e) {
                if (this.value !== "") {
                    //ver si el primer caracter es el simbolo minus "-"
                    let caracterInicial = this.value.substring(0, 1);
                    //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
                    let contenido = caracterInicial === "-" ? this.value.substring(1, this.value.length).replace(regexpNumber, "").split(DECIMALES) : this.value.replace(regexpNumber, "").split(DECIMALES);
                    // añadimos los separadores de miles a la parte entera del numero
                    contenido[0] = contenido[0].length ? INFLOCAL.format(parseInt(contenido[0])) : "0";
                    // Juntamos el numero con los decimales si hay decimales
                    this.value = contenido.length > 1 ? contenido.slice(0, 2).join(DECIMALES) : contenido[0];
                    // Juntamos el signo "-" minus si existe
                    if (caracterInicial === "-") {
                        this.value = caracterInicial + this.value;
                    }
                    //damos color rojo si numero negativo
                    this.className = this.value.substring(0, 1) !== "-" ? "numberIndistinto positivos" : "numberIndistinto negativos";
                }
            }
            // Formatear solamente numeros decimales positivos
            function numberFormatPositivo(e) {
                if (this.value !== "") {
                    //se filtra el contenido de caracteres no admisibles
                    //se divide el numero entre la parte entera y la parte decimal
                    let contenido = this.value.replace(regexpNumber, "").split(DECIMALES);
                    // añadimos los separadores de miles al primer numero del array
                    contenido[0] = contenido[0].length ? INFLOCAL.format(parseInt(contenido[0])) : "0";
                    // Juntamos el numero con los decimales si hay decimales
                    this.value = contenido.length > 1 ? contenido.slice(0, 2).join(DECIMALES) : contenido[0];
                }
            }
            // Formatear numeros decimales indistintamente tanto positivos como negativos con solo 2 decimales
            function numberFormatIndistintoFixed(e) {
                if (this.value !== "") {
                    //ver si el primer caracter es el simbolo minus "-"
                    let caracterInicial = this.value.substring(0, 1);
                    //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
                    let contenido = caracterInicial === "-" ? this.value.substring(1, this.value.length).replace(regexpNumber, "").split(DECIMALES) : this.value.replace(regexpNumber, "").split(DECIMALES);
                    //ver si hay ya 2 decimales introducidos
                    if (contenido.length > 1) {
                        if (contenido[1].length > 2) {
                            contenido[1] = contenido[1].substring(0, contenido[1].length - 1);
                        }
                    }
                    // añadimos los separadores de miles a la parte entera del numero
                    contenido[0] = contenido[0].length ? INFLOCAL.format(parseInt(contenido[0])) : "0";
                    // Juntamos el numero con los decimales si hay decimales
                    this.value = contenido.length > 1 ? contenido.slice(0, 2).join(DECIMALES) : contenido[0];
                    // Juntamos el signo "-" minus si existe
                    if (caracterInicial === "-") {
                        this.value = caracterInicial + this.value;
                    }
                    //damos color rojo si numero negativo
                    this.className = this.value.substring(0, 1) !== "-" ? "numberIndistinto positivos" : "numberIndistinto negativos";
                }
            }
            // Formatear solamente numeros decimales positivos con solo 2 decimales
            function numberFormatPositivoFixed(e) {
                if (this.value !== "") {
                    //se filtra el contenido de caracteres no admisibles
                    //se divide el numero entre la parte entera y la parte decimal
                    let contenido = this.value.replace(regexpNumber, "").split(DECIMALES);
                    //ver si hay ya 2 decimales introducidos
                    if (contenido.length > 1) {
                        if (contenido[1].length > 2) {
                            contenido[1] = contenido[1].substring(0, contenido[1].length - 1);
                        }
                    }
                    // añadimos los separadores de miles a la parte entera del numero
                    contenido[0] = contenido[0].length ? INFLOCAL.format(parseInt(contenido[0])) : "0";
                    // Juntamos el numero con los decimales si hay decimales
                    this.value = contenido.length > 1 ? contenido.slice(0, 2).join(DECIMALES) : contenido[0];
                }
            }
            window.onload = function() {
                //SE EJECUTA DESPUES CARGAR EL CODIGO CSS y HTML
                // Creamos el evento keyup para cada clase definida
                document.querySelectorAll(".integerIndistinto").forEach(el => el.addEventListener("keyup", integerFormatIndistinto));
                document.querySelectorAll(".integerPositivo").forEach(el => el.addEventListener("keyup", integerFormatPositivo));
                document.querySelectorAll(".numberIndistinto").forEach(el => el.addEventListener("keyup", numberFormatIndistinto));
                document.querySelectorAll(".numberPositivo").forEach(el => el.addEventListener("keyup", numberFormatPositivo));
                document.querySelectorAll(".numberIndistintoFixed").forEach(el => el.addEventListener("keyup", numberFormatIndistintoFixed));
                document.querySelectorAll(".numberPositivoFixed").forEach(el => el.addEventListener("keyup", numberFormatPositivoFixed));
            };
        </script>
    </body>
</html>
Responder
Imágen de perfil
Hace 4d
estrellaestrellaestrellaestrellaestrella
Excelente Aitor!!! mis mas sinceras felicitaciones!!!!
Responder

Comentar la versión: Permite numeros negativos

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s6818