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"> *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>