1

tengo este pequeño script que colocar separadores de miles en un input de html.

El problema se presenta en móviles, cuando retorna los números separados, retornar la cadena completa, es decir pongo 10000 y devuelve 10.1000

var separador = document.getElementById('separadorMiles');

separador.addEventListener('keyup', (e) => {
    var entrada = e.target.value.split('.').join('');
    entrada = entrada.split('').reverse();
    
    var salida = [];
    var aux = '';
    
    var paginador = Math.ceil(entrada.length / 3);
    
    for(let i = 0; i < paginador; i++) {
        for(let j = 0; j < 3; j++) {
            "123 4"
            if(entrada[j + (i*3)] != undefined) {
                aux += entrada[j + (i*3)];
            }
        }
        salida.push(aux);
        aux = '';
       
        e.target.value = salida.join('.').split("").reverse().join('');
    }
}, false);
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/main.css">
        
        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>

        <script type="text/javascript" src="/path/to/jquery.js"></script>



         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/js/bootstrap-datetimepicker.min.js"></script>
        <link rel="stylesheet" href="css/style.css">
        
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
<div class="container presentacion">
Este simulador ayuda a visualizar el resultado obtenido por una inversión en fechas pasadas, utilizando datos reales del Fondo de inversión
</div>
<br>
<div class="row">
<div class="container">
    
        <form action="" id="form">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
            <div class="form-group">
            <label for="male">Monto a ingresar</label><br>
            <input type="text" name="inversion" placeholder="$10.000.000" class="form-control" id="separadorMiles" required><br>
            <label for="startDate">Fecha Inicio</label><br>
            <input type="date" name="date" id="dateIni"  value="2018-02-08" min="2016-04-27" max="2018-03-07" class="form-control"><br>
            <label for="endDate">Fecha Terminación</label><br>
            <input type="date" name="date" id="dateFin"  value="2018-03-08" min="2016-04-28" max="2018-03-08"  class="form-control"><br>
            <br>
            <button type="button" onclick="getData()" class="btn btn-default">Consultar</button>
            <script type="text/javascript" src="js/app-60.js?53"></script>
            </div>
        </div
>        <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
            <div class="centrar-vertical">
            
            
                
            <div class="box-max">
                <div class="box-one"><output id="salidainversion" >Inversión</output></div>
                <div class="box-two"><output id="salidaGanancias" >Ganancias</output></div>
                <svg height="120" width="200">
                    <line x1="50" y1="115" x2="130" y2="45" style="stroke:rgb(244,193,0);stroke-width:2" />
                    <circle cx="50" cy="115" r="3" style="stroke:rgb(244,193,0);stroke-width:5"/>
                    <circle cx="130" cy="45" r="3" style="stroke:rgb(244,193,0);stroke-width:5"/>
                </svg>
            </div>
            <div class="box-min">
                <div class="box-tre"><output id="salidadateIni" >01-10-2017</output> </div>
                <div class="box-four"><output id="salidadateFin" >31-10-2017</output> </div>
            </div>

        </div>
    </div>

        </form> 
    
</div>
</div>
<div class="row">
<div class="container">
<p class="advertencia">&nbsp;&nbsp; *Los rendimientos pasados, no garantizan rendimientos futuros</p>
</div>
</div>

        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
            <script src="./js/index.js"></script>
            <script src="./js/jquery-3.2.1.min.js"></script>
            <script src="./js/tether.min.js"></script>
            <script src="./js/popper.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
        <script src="js/vendor/bootstrap.min.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

1

2 respuestas 2

1

Intenta suscribirte al evento input en lugar de keyup. Aprovecho para sugerir una forma "mas simple" de lograr el mismo resultado.

Solución:

var separador = document.getElementById('separadorMiles');

separador.addEventListener('input', (e) => {
    var entrada = e.target.value.split(','),
      parteEntera = entrada[0].replace(/\./g, ''),
      parteDecimal = entrada[1],
      salida = parteEntera.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.");
      
    e.target.value = salida + (parteDecimal !== undefined ? ',' + parteDecimal : '');
}, false);
<input type="text" name="inversion" placeholder="$10.000.000" class="form-control" id="separadorMiles" required><br>

Referencia:

5
  • Si uno escribe más de tres decimales, se agrega el separador de miles a estos, lo cual es incorrecto.
    – Rubén
    Commented el 10 mar. 2018 a las 22:47
  • @Rubén, he actualizado mi respuesta, para dar soporte a decimales (lo cual no era requerido)
    – Marcos
    Commented el 11 mar. 2018 a las 11:17
  • @Marcos sigue teniendo el mismo problema que la respuesta de Rubén: en Chrome para Android, si se ingresa un número mayor a 1000, los dígitos terminan desordenados porque, al formatear, selectionStart se mantiene constante pero el largo de el número no. El resultado de ingresar dígitos en orden: 123.568.974
    – Mariano
    Commented el 11 mar. 2018 a las 21:18
  • @Mariano, exactamente que versión de Chrome para Android? Porque lo probé usando Chrome 64 on Android (Lollipop) y no lo pude reproducir
    – Marcos
    Commented el 13 mar. 2018 a las 15:30
  • @Marcos Chrome 64.0.3282.137, Android O (8.1.0), quizás influya el teclado: Gboard (es el teclado de Google, instalado por defecto en los Google Pixel)
    – Mariano
    Commented el 13 mar. 2018 a las 15:45
1

Como mencioné en mi respuesta a otra pregunta similar,

Hoy día, la mayoría de los navegadores modernos soportan Intl.NumberFormat lo cual nos ayuda a dar formato a un número sin necesidad de recurrir a expresiones regulares ni a funciones específicas de jQuery.

En la liga anterior, al final de la página se incluye la compatibilidad con navegadores de escritorio, móviles y servidor.

A continuación el ejemplo que incluí en la respuesta referida, adaptado para mostrar el formato de pesos argentinos, es decir, signo $, punto como separador de miles y coma como separador de decimales.

var numero = 1E6 + 56 / 100; //Un millón y 56 centésimas
document
  .getElementById('salida')
  .innerHTML = new Intl.NumberFormat('es-AR', {
    style: 'currency',
    currency: 'ARS'
  }).format(numero);
<div id="salida"></div>

En el siguiente ejemplo intenté aplicar lo anterior para permitir que un input agregue automáticamente el separador de miles y permita la inclusión de decimales pero está incompleto ya que le falta considerar varios casos como el que usuario cambie el punto de inserción de texto o que quiera escribir un centavo (0,01).

var monto = document.querySelector('input');
var options = {
	style:'currency',
  currency:'ARS',
  minimumFractionDigits:0
};
monto.addEventListener('input',function(){
  // Si el último caracter es una coma, deberemos agregarla
  var separador = (this.value.substr(this.value.length - 1,1)===',')?',':''; 
	var monto1 = this.value
  .replace(/[^\d,]/g,"") //remover $ punto y otros caracteres no validos
  .replace(",","."); // JavaScript usa punto como separador decimal para los números,entonces reemplazamos la coma por un punto
  this.value = Intl.NumberFormat('es-AR',options).format(monto1)
  + separador; // Si el último caracter es una coma, agregarlo.
});
<input type="text" placeholder="$ 10.000">

Muy probablemente la solución sea adoptar una librería para enmascarar entrada que incluya el formato de moneda deseado o bien que permita personalizarlo.

Preguntas relacionadas

8
  • El segundo código va moviendo el cursor, haciendo que se inserte en el medio del número (efecto indeseado)
    – Mariano
    Commented el 10 mar. 2018 a las 23:29
  • @Mariano No veo eso ¿Qué navegador estás usando? Yo probé en Chrome y Firefox para Windows.
    – Rubén
    Commented el 10 mar. 2018 a las 23:35
  • Chrome 64 en Android (claramente un error en mobile). Se corre el cursor una posición por cada caracter que agrega $ o .)... Esto es lo que queda al ingresar los dígitos en orden: $ 356.789.421.
    – Mariano
    Commented el 10 mar. 2018 a las 23:38
  • @Mariano En Chrome 65 para Android no veo eso.
    – Rubén
    Commented el 10 mar. 2018 a las 23:44
  • @Mariano, sin embargo, ya me dí cuenta de otro comportamiento extraño
    – Rubén
    Commented el 10 mar. 2018 a las 23:57

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.