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 Puntos7180

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

IronHeart comentado Mar 22, 2016

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>

codeando comentado Mar 22, 2016

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

saludos.

IronHeart comentado Mar 22, 2016

@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

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

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Actividad Reciente

¿Eres Usuario Apple?

...

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

Conecta