Este es un buen ejemplo de uso de expresiones regulares para formatear un numero con Javascript.
La idea es escribir en una caja de texto, por ejemplo:
123456789
y que automaticamente, aparezcan los separadores de miles quedando un resultado como el sgte:
123.456.789
A continuacion el codigo completo de la pagina y la funcion javascript:
La funcion JS es la sgte:
function format(input)
{
var num = input.value.replace(/\./g,”);
if(!isNaN(num)){
num = num.toString().split(”).reverse().join(”).replace(/(?=\d*\.?)(\d{3})/g,’$1.’);
num = num.split(”).reverse().join(”).replace(/^[\.]/,”);
input.value = num;
}else{ alert(‘Solo se permiten numeros’);
input.value = input.value.replace(/[^\d\.]*/g,”);
}
}
Y ponemos una caja de texto en un formulario con el sgte. codigo:
<form>
<input type=”text” onkeyup=”format(this)” onchange=”format(this)”>
</form>
La funcion que formatea, se lamara por cada caracter numerico que se escriba y asi facilitar l aentrada de datos.
Finalmente, el codigo completo de la pagina:
<html>
<title>Formatear Numero</title>
<head>
<script type=”text/javascript”>
function format(input)
{
var num = input.value.replace(/\./g,”);
if(!isNaN(num)){
num = num.toString().split(”).reverse().join(”).replace(/(?=\d*\.?)(\d{3})/g,’$1.’);
num = num.split(”).reverse().join(”).replace(/^[\.]/,”);
input.value = num;
}else{ alert(‘Solo se permiten numeros’);
input.value = input.value.replace(/[^\d\.]*/g,”);
}
}
</script>
</head><body>
<form>
<input type=”text” onkeyup=”format(this)” onchange=”format(this)”>
</form></body>
</html>
Archivado en: Javascript Etiquetado: | Javascript, Separador
Me fue de gran ayuda! GRACIAS!
No se porque no me funciona el codigo de la pagina, lo copie y pegue y no me funciono en ie6 ni firefox :S
NO FUNCIONA
Hola!!! mil gracias por los datos y el código, funcia muy bien
Alfredo, lo que hay que cambiar en el codigo son los caracteres que se ven como acentos, hay que sustituirlos por comillas dobles (“”) saludos!!!
Hola, el codigo no me funciona, podrías ser mas especifíca Belem en donde cambiar las comillas dobles.
Porque cuando cambio las comillas en:
var num = input.value.replace(/\./g,”);
Se me desactiva el if que sigue y no funciona, si cambio todas las comillas no funciona, si cambio las comillas dobles y solas, no funciona.
Y si no cambio nada, no funciona.
Amigo este post m salvo, llevaba horas buscano algo asi y es refacisl
hice el cambio y no hubo problemas
aca el codigo correjido
function Moneda(input){
var num = input.value.replace(/\./g,”");
if(!isNaN(num)){
num = num.toString().split(“”).reverse().join(“”).replace(/(?=\d*\.?)(\d{3})/g,”$1.”);
num = num.split(“”).reverse().join(“”).replace(/^[\.]/,”");
input.value = num;
}else{
input.value = input.value.replace(/[^\d\.]*/g,”");
}
}
y asi lo llaman
Esta excelente el script, sobre todo porque no tengo ni idea de JS
, sabran de alguno que separe miles con comas y decimales con puntos?
Saludos y muchas gracias!
por si a alguien le quedasen dudas sobre las comillas:
para todo lo que esta dentro del script los reemplazos son con COMILLA SIMPLE, lo que aparenta ser doble comilla en realidad son dos comillas simples seguidas.
los únicos reemplazos con doble comilla son la declaración inicial del script (“text/javascript”) y todo lo que sigue debajo del script (las propiedades de la caja de texto).
muy enredado???
te recomiendo q subas el html y asi evitas problemas de comillas, comilla simple o seudoacentos.
Hice los cambios y no me jala , esto es lo que busco , alguien me podria enviar el codigo , desde ya muchas gracias
si tienes problemas con el script (al copiarlo y pegarlo en tu pagina), cambia las comillas que te aparecen en el codigo por cremillas simples ( ‘ ) y asi se soluciona el problema.
Independizando la funcion… seria asi
function f_js_puntos_de_mil(param_valor)
{
var num = param_valor.replace(/\./g,”");
if(!isNaN(num))
{
num = num.toString().split(“”).reverse().join(“”).replace(/(?=\d*\.?)(\d{3})/g,”$1.”);
num = num.split(“”).reverse().join(“”).replace(/^[\.]/,”");
}
else
{
num = param_valor.replace(/[^\d\.]*/g,”");
}
return num ;
}
Hola,
he probado el scritp y va vastante bien solo encuentro un fallo que no consigo corregir.
Si introduzco un uno segido de varios ceros, no me ha ce bien la separación de miles. Os pongo varios ejemplos:
Si introduzco 10000 me pone 1.0000
Si introduzco 100000 me pone 10.0000
Si introduzco 1000000 me pone 100.0000
Si introduzco 10000000 me pone 1.000.0000
Como vereis el primer separador de miles por la derecha no me lo pone bien y en vez de hacerlo a los 3 ceros me lo hace a los 4 por lo que todo el número está mal separado.
Esto no me pasa si introduzco otros números que no sean 0. ¿sabeis como arreglarlo? ?os ha pasado lo mismo?
Gracias y un saludo
correciones JavaScrips
Formato Numerico al escribir
esta funcion genera el formato numerico al escribir
primero
1.-Texbox onkeyup=”Miles(this)”
2.- Texbox onchange=”Miles(this)”
3.- onkeypress=”return Numeros(e)”
nota:en el codebegin LOAD agregar la siguente linea
Texbox .Attributes.Add(“onkeypress”, “javascript:return Numeros(event);”)
4.- que este referenciado el javaScrips a la pagina asp
5.- recordar hacer ToString.replace (“.”,”") si su campo es string
usen un doble o decimales
*/
function Miles(input){
var num = input.value.replace(/\./g,”");
if(!isNaN(num)){
num = num.toString().split(“”).reverse().join(“”).replace(/(?=\d*\.?)(\d{3})/g,”$1.”);
num = num.split(“”).reverse().join(“”).replace(/^[\.]/,”");
input.value = num;
}else{
input.value = input.value.replace(/[^\d\.]*/g,”");
}
}
function Numeros(e) {
var k;
document.all ? k = e.keyCode : k = e.which;
return ((k > 47 && k < 58) || k == 46 || k == 9 || k == 8 || k == 13);
}
funciona de maravilla! y para no tener problemas cuando se envian los datos por post le adicionE esta funciOn en el onblur.. similar al format.
Entonces solo se ve la separacion de miles mientras este presente en el campo, luego las quita…
function unFormat(input)
{
/*uso en form: “onblur” => “unFormat(this)”*/
var num = input.value.replace(/\./g,”);
input.value = num;
}
Como lo modifico si quiero agregarle decimales
Por Ejemplo:
100.100,11
“Error en tiempo de ejecución de Microsoft JScript: Se esperaba un objeto”
Siempre que ingreso este codigo y otros similares con la misma funcion me sale este error y la verdad casi nunca he usado Js y no se como solucionar me pueden colaborar Gracias de antemano
Comolomodifico si quiero agregarle decimales
Por Ejemplo:
100.100,11
el problema que tengo que al grabarlo en una bd mysql no registra el valor completo. por ejemplo 15.000 solo graba 15.
He buscado corregir el codigo pero el problema persiste. alguna idea???
Hola.
Cuando envies el monto a la base MySQL, antes de agregarlo a tu consulta SQL, haz un str_replace() donde reemplazas el punto por un valor vacio.
atte.
Formato Numerico al escribir (Miles)
esta funcion genera el formato numerico al escribir
primero
1.-Texbox onkeyup=”Moneda(this)”
2.- Texbox onchange=”Moneda(this)”
3.- que este referenciado el javaScrips a la pagina asp
*/
function Moneda(input) {
var num = input.value.replace(/\./g, “”);
if (!isNaN(num)) {
num = num.toString().split(“”).reverse().join(“”).replace(/(?=\d*\.?)(\d{3})/g, “$1.”);
num = num.split(“”).reverse().join(“”).replace(/^[\.]/, “”);
input.value = num;
} else {
input.value = input.value.replace(/[^\d\.]*/g, “”);
}
}
Una version que tambien funciona la puedes ver aqui, codigo y ejemplo en ejecucion
http://www.tunait.com/javascript/?s=puntos#codigo
Para responderle a los que desean que agrege los decimales:
La logica seria validar de que si por ejemplo queremos 3 decimales pues si hay 3 numeros escritos o menos se ejecute un if que añada un cero y una coma a la izquierda y no ejecute este script para formatear con el separador de miles, asi mismo en caso de que escriba mas de 3 caracteres borre el cero a la izquierda y vaya corriendo los numeros a la izquierda, porsupuesto que entraria en ejecucion este script para agregar el separador de miles cuando hayan al menos 8 caracteres en la caja de texto ya que seria un numero como este 1.000,000 ¿Se entiende la idea?
Disculpen se deberia ejecutar este script cuando hayan 9 caracteres para la division con 3 decimales segun la logica que explique anteriormente, si me da un chance voy a programarlo y subo las lineas para que vean.
Por cierto el script que recomiendan aca de Tunait da error con 3 y 2 decimales y es lo que estoy necesitando casualmente.