¿Cómo establecer un formato numérico desde el lado del cliente en ASP.NET?

Bueno después de una pesada tarde de trabajo e investigando una forma adecuada de dar formato a un valor numérico en un control TEXTBOX y después de explorar múltiples opciones con JQUERY y también utilizando código del lado del servidor los cuales lamentablemente no pudieron resolver mi problema como es debido, pude encontrar y personalizar mi propio script para dar un formato de contabilidad con separadores decimales y separadores de milésimas.

Lo mejor de este código es que funcionara para ASP, ASP.NET, PHP o simple HTML y de hecho ni siquiera utiliza JQUERY

La idea de esta función es que al escribir un valor numérico en un control TEXTBOX por ejemplo 123456.789 el texto se formatee y se muestre de esta otra forma 123,456.78.

El código Javascript:

// Este procedimiento formatea agregado comas cada tres digitos y acotando el numero de decimales segun las variables enviadas
//
// control     : Control enviado desde el codigo HTML. Al llamar el evento se coloca "this"
// num_decimal : Cantidad de decimales que mostrara el numero al ser formateado
//
function formatNumber(control, num_decimal) {
    var nums = new Array();
    var simb = ","; //Éste es el separador
    valor = control.value;
 
    var numeroLetras = valor.length; // numero de caracteres
 
    if (control.value.indexOf('.') > 0) {
 
        var posicion_decimal = valor.indexOf('.'); // Posicion del punto en la cadena
        var decimal = valor.substring(posicion_decimal); // Se obtiene el valor numerico decimal sin el punto
 
        decimal = decimal.replace(".", ""); // Se eliminan todos los puntos
        decimal = decimal.replace(/D/g, "");   //Ésta expresión regular solo permitira ingresar números
        decimal = decimal.substring(0, num_decimal) // Se acota el numero para que se muesten solo la cantidad de decimales especificada
        valor = valor.substring(0, posicion_decimal) // Se elimina el valor decimla del valor numerico
 
    }
 
    valor = valor.replace(/D/g, "");   //Ésta expresión regular solo permitira ingresar números
 
    nums = valor.split(""); //Se vacia el valor en un arreglo
    var long = nums.length - 1; // Se saca la longitud del arreglo
    var patron = 3; //Indica cada cuanto se ponen las comas
    var prox = 2; // Indica en que lugar se debe insertar la siguiente coma
    var res = "";
 
    while (long > prox) {
        nums.splice((long - prox), 0, simb); //Se agrega la coma
        prox += patron; //Se incrementa la posición próxima para colocar la coma
 
    }
 
    for (var i = 0; i <= nums.length - 1; i++) {
        res += nums[i]; //Se crea la nueva cadena para devolver el valor formateado
    }
 
 
    if (control.value.indexOf('.') > 0) {
        var enviar = res + "." + decimal
    }
    else {
        var enviar = res
    }
 
    control.value = enviar;
}

Adicionalmente agregaremos una funcion la cual nos permitira limpiar nuestra caja de texto al posicionarnos sobre esta, de tal forma que el cliente no tenga que borrar lo que ya esta para colocar un nuevo valor.

// Esta funcion verifica si el textbox esta lleno al disparar el evento focus y limpia el contenido.
// control     : Control enviado desde el codigo HTML. Al llamar el evento se coloca "this"
//
function control_clear(control) {
    var valor = control.value;
 
    if (valor.length > 0) {
        control.value = "";
    }
}

Con respecto a nuestro código HTML el cual aclaro que en este ejemplo utilizare controles ASP.NET y de AJAXTOOLKIT seria el siguiente:

<asp:TextBox 
	ID="txtValor" 
	runat="server" 
	Text="0.00" 
	onblur="formatNumber(this, 2)" 
	onkeypress="formatNumber(this, 2)" 
	onfocus="control_clear(this)">
</asp:TextBox>

Recuerden que esto sirve tambien para una etiqueta input tipo text por lo que no deberian tener problemas al utilizar PHP o simple HTML.

Evento “onkeypress”: Este se dispara cada vez que presionamos una tecla dentro del control, yo recomiendo que orienten al usuario presionar la tecla ENTER al finalizar de escribir el valor de esta forma garantizan que todo se acomode como se debe, de igual forma tenemos el siguiente evento para solventar este problema.

Evento “onblur”: se dispara cuando el control pierde el foco. Aca lo uso para reacomodar el texto en el control en dado caso se haya generado un problema solo con el keypress.

Evento “onfocus”: Aca no se acomoda nada, simplemente limpia el control para que el visitante no tenga que borrar lo que ya se encuentra en la caja de texto, lo cual en mi caso es un “0.00”.

Deberiamos de hacer algunas cosas para mejorar y validar nuestro formulario, uno de ellos es validar que nuestra caja de texto para que solo admita valores numericos, comas y puntos. En el caso de ASP.NET es algo muy sencillo utilizando el control “FilteredTextBoxExtender” de “ajaxToolkit“.

<ajaxToolkit:FilteredTextBoxExtender
	ID="ftValor" 
	runat="server" 
	FilterType="Custom, Numbers"
	ValidChars=".,"
	TargetControlID="txtValor">
</ajaxToolkit:FilteredTextBoxExtender>

Les recuerdo que para que este control funcione correctamente debe estar dentro del mismo panel en el cual se encuentre el control textbox.

Bien eso ha sido todo, espero les sea de utilidad y cualquier duda ya saben comenten y de ser posible compartan me ayudarian mucho.

Puede interesarte tambien ¿Cómo establecer un formato numérico desde el lado del servidor en ASP.NET?

Suscribir
Notificar a
guest
2 Comentarios
Comentarios en línea
Ver todos los comentarios
Freddy Aleman

Excelente informacion teacher,,,

trackback

[…] Lo mejor de este código es que funcionara para ASP, ASP.NET, PHP o simple HTML y de hecho ni siquiera utiliza JQUERY… Sigue Leyendo […]