entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

4votos

Dar Formato a números ingresados mediante javascript

Buenas Gente de la Comunidad tengo una pequeña duda en la cual espero me puedan ayudar.. El caso va así tengo 4 textbox la dinámica es la siguiente textbox1 + textbox2 + textbox 3 = textbox4.
al momento de ingresar los numeros en los textbox quisiera darle el siguiente formato:

AHORA:123456789
DESEADO:123,456,789,00

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DEMO DECIMALES </title>

</head>

<body>
    <form runat="server">
        <asp:TextBox ID="txtremubruta" runat="server" CssClass="TextBoxBorder" Width="70px" onkeyup="agregar_numero()"></asp:TextBox>
        <asp:TextBox ID="txtotrosingresos" runat="server" CssClass="TextBoxBorder" Width="70px" onkeyup="agregar_numero()"></asp:TextBox>
        <asp:TextBox ID="txtremubrutamensual" runat="server" CssClass="TextBoxBorder" Width="70px" onkeyup="agregar_numero()"></asp:TextBox>
        <br >
        Total<br >
        <asp:TextBox ID="TxtInfoPatriTotal" runat="server" CssClass="TextBoxBorder" Width="70px"></asp:TextBox>

    </form>
</body>

<script>
    function agregar_numero() {

        var TextBox1 = parseInt(document.getElementById("txtremubruta").value);
        var TextBox2 = parseInt(document.getElementById("txtotrosingresos").value);
        var TextBox3 = parseInt(document.getElementById("txtremubrutamensual").value);
        var result = TextBox1 + TextBox2 + TextBox3;

        document.getElementById("TxtInfoPatriTotal").value = result;
    }
</script>
</html>

De antemano agradezco su tiempo.

2 Respuestas

3votos

ankeorum Puntos7210

A lo mejor esto te vale?

var formatNumber = {
 separador: ".", // separador para los miles
 sepDecimal: ',', // separador para los decimales
 formatear:function (num){
 num +='';
 var splitStr = num.split('.');
 var splitLeft = splitStr[0];
 var splitRight = splitStr.length &gt; 1 ? this.sepDecimal + splitStr[1] : '';
 var regx = /(\d+)(\d{3})/;
 while (regx.test(splitLeft)) {
 splitLeft = splitLeft.replace(regx, '$1' + this.separador + '$2');
 }
 return this.simbol + splitLeft +splitRight;
 },
 new:function(num, simbol){
 this.simbol = simbol ||'';
 return this.formatear(num);
 }
}

Fue tan simple como: http://lmgtfy.com/?q=javascript+formatear+numeros

1voto

IronHeart comentado

Hola @ankeorum no necesariamente utilicé tu código que esta en el post , pero me hiciste recordar que también debía buscar información en "español" ya que usualmente busco referencias en ingles por su contenido mas nutrido. Acá dejo el código que me ayudo a resolver este interrogante para motivos académicos o mejoras. Gracias :D

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DEMO DECIMALES </title>

</head>

<body>
    <form runat="server">
        <asp:TextBox ID="txtremubruta" runat="server" CssClass="TextBoxBorder" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"></asp:TextBox>
        <asp:TextBox ID="txtotrosingresos" runat="server" CssClass="TextBoxBorder" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"></asp:TextBox>
        <asp:TextBox ID="txtremubrutamensual" runat="server" CssClass="TextBoxBorder" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"></asp:TextBox>
        <br />
        Total<br />
        <asp:TextBox ID="TxtInfoPatriTotal" runat="server" CssClass="TextBoxBorder" Width="70px"></asp:TextBox>

    </form>
</body>

<script>
    function agregar_numero() {

        var TextBox1 = parseFloat(document.getElementById("txtremubruta").value);
        var TextBox2 = parseFloat(document.getElementById("txtotrosingresos").value);
        var TextBox3 = parseFloat(document.getElementById("txtremubrutamensual").value);
        var result = TextBox1 + TextBox2 + TextBox3;

        document.getElementById("TxtInfoPatriTotal").value = result;
    }
</script>
<script>
    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>
</html>

1voto

codeando comentado

la verdad ami si me funciona tu código solo que quisiera saber si se puede aplicar en un td de una tabla..

saludos.

1voto

IronHeart comentado

@codeando hola que tal , sobre tu pregunta supongo que dentro de la etiqueta <td> debería ir una caja de texto, si lo que estoy suponiendo es correcto debería ser maso menos así.(Disculpa si la estructura es muy básica).Saludos


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DEMO DECIMALES </title>

</head>

<body>
        <table id="tbldemo" style="border: 1px solid black">
            <tr>
                <td>
                    <asp:TextBox ID="txtremubruta" runat="server" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:TextBox ID="txtotrosingresos" runat="server" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"></asp:TextBox></td>
            </tr>
            <tr>
                <td>
                    <asp:TextBox ID="txtremubrutamensual" runat="server" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"></asp:TextBox></td>
            </tr>
            <tr>
                <td>
                    <asp:TextBox ID="TxtInfoPatriTotal" runat="server" Width="70px"></asp:TextBox></td>
            </tr>
        </table>
    </form>
</body>

0voto

Exedore Puntos440

Revista esto, te puede servidor para otro proyectos:
https://github.com/customd/jquery-number

0voto

berriosf comentado

saludos muy buena toda la informacion pero me gustaria saber como hacer que un monto en un input tennga separador de miles y 2 decimales en esta funcion

<script>
    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>

se los agradeceria grandemente

0voto

Peter comentado

@berriosf abre una pregunta nueva.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta