Mascara de moneda mientras se escribe

Posted on 8 noviembre, 2012 por arieloliva

El Post describe el código en JavaScript para crear una mascara de tipo moneda mientras se escribe en un cuadro de texto. El separador de millares es ‘,’ y acepta solo dos números decimales.

Mascara de Moneda

La función principal es «cpf«, la cual se explica a continuación.:

	function cpf(v){     
		v=v.replace(/([^0-9\.]+)/g,''); 
		v=v.replace(/^[\.]/,''); 
		v=v.replace(/[\.][\.]/g,''); 
		v=v.replace(/\.(\d)(\d)(\d)/g,'.$1$2'); 
		v=v.replace(/\.(\d{1,2})\./g,'.$1'); 
		v = v.toString().split('').reverse().join('').replace(/(\d{3})/g,'$1,');    
		v = v.split('').reverse().join('').replace(/^[\,]/,''); 
		return v;  
	}

Linea 2. Acepta solo números y el punto.
Linea 3. Quita punto al inicio.
Linea 4. Elimina dos puntos juntos.
Linea 5. Si encuentra el patrón .123 lo cambia por .12.
Linea 6. Si encuentra el patrón .1. o .12. lo cambia por .1 o .12.
Linea 7. Pone la cadena al revés Si encuentra el patrón 123 lo cambia por 123,.
Linea 8. Si inicia con una coma la reemplaza por nada.

La llamada a la función se realiza en el evento «onkeypress» del cuadro de texto.

	onkeypress="mascara(this,cpf)"

La instrucción «onpaste» con retorno falso sirve para que al cuadro de texto no se pueda pegar texto directamente.

	onpaste="return false"

Mascara de moneda en un numero

Cuando ya se tiene un numero y se quiera aplicar la mascara de moneda, se puede realizar lo siguiente. Se eliminan las comas.

	varMonto = varMonto.replace(/[\,]/g,'');

Se parsea a tipo «Float» con el metodo «toFixed(2)» para que muestre el numero con dos decimales.

	varMonto = parseFloat(varMonto).toFixed(2)

Se llama a la funcion «addCommas», la cual agrega las comas cada tres posiciones.

	varMonto = addCommas(varMonto);

La función «addCommas» se muestra a continuación .

	function addCommas(nStr){
            nStr += '';
            x = nStr.split('.');
            x1 = x[0];
            x2 = x.length > 1 ? '.' + x[1] : '';
            var rgx = /(\d+)(\d{3})/;
            while (rgx.test(x1)) {
               x1 = x1.replace(rgx, '$1' + ',' + '$2');
            }
            return x1 + x2;
        }

La siguiente imagen muestra tres campos de texto. El campo «importe» crea una mascara de tipo moneda mientras se escribe. Los campos «IVA» y «SubTotal» se calculan a partir del dato del campo «importe», cuando el cursor del mouse sale.

Mascara de Moneda en numero

En el siguiente enlace se muestra todo el código, solo se tiene que descomprimir y ejecutar el archivo este-mascaraMoneda.html en un Explorardor web. este-mascaraMoneda.rar

Intercambio entre listas

Posted on 14 octubre, 2012 por arieloliva

Responder

El Post describe el código en JavaScript para realizar el intercambio de datos entre 2 listas.

Intercambio de datos entre dos listas

Consta de cuatro botones, los cuales tienen las siguientes funciones, de acuerdo a su posición:

Pasa todo el contenido de la lista izquierda a la lista derecha. Ordena la lista destino.
Pasa los registros seleccionados de la lista derecha a la lista izquierda. Ordena la lista destino.
Pasa los registros seleccionados de la lista izquierda a la lista derecha. Ordena la lista destino.
Pasa todo el contenido de la lista derecha a la lista izquierda. Ordena la lista destino.

El funcionamiento de los 4 botones es similar por lo tanto solo explicare el primero.

	$("#agregar").click(function() { 
            $("#selectGrupos option:selected").each(function(i){                    
            	var $x  = $("select#selectResult");
                var tot = $("#selectResult option").length;
                var  y  = $x.get(0)
                y.options[tot] = new Option; 
                y.options[tot].text = $(this).text(); 
                y.options[tot].value = tot; 
                }).remove(); ordenarCombos2();});

Linea 1. Se ejecuta al hacer clic al botón correspondiente.
Linea 2. Selecciona los datos habilitados de la lista original -o todos si no tiene la instrucción selected–
Lineas 3 a 8. Obtiene la longitud de la lista destino y agrega los datos habilitados a la lista destino.
Linea 9. Remueve los datos habilitados de la lista origen. Ejecuta la función ordenarCombos2, la cual ordena los datos de la lista destino.

El siguiente recuadro muestra el script completo.

	$(document).ready(function(){    
		$("#agregar").click(function() { 
            $("#selectGrupos option:selected").each(function(i){                    
            	var $x  = $("select#selectResult");
                var tot = $("#selectResult option").length;
                var  y  = $x.get(0)
                y.options[tot] = new Option; 
                y.options[tot].text = $(this).text(); 
                y.options[tot].value = tot; 
                }).remove(); ordenarCombos2();}); 
         $("#agregarTodo").click(function() { 
            $("#selectGrupos option").each(function(i){                    
            	var $x  = $("select#selectResult");
                var tot = $("#selectResult option").length;
                var  y  = $x.get(0)
                y.options[tot] = new Option; 
                y.options[tot].text = $(this).text(); 
                y.options[tot].value = tot; 
                }).remove(); ordenarCombos2();}); 
             
     	$("#quitar").click(function() { 
        	$("#selectResult option:selected").each(function(i){                    
                var $x  = $("select#selectGrupos");
                var tot = $("#selectGrupos option").length;
                var  y  = $x.get(0)
                y.options[tot] = new Option; 
                y.options[tot].text = $(this).text(); 
                y.options[tot].value = tot; 
               }).remove(); ordenarCombos1();}); 
               
                
     	$("#quitarTodo").click(function() { 
        	$("#selectResult option").each(function(i){                    
                var $x  = $("select#selectGrupos");
                var tot = $("#selectGrupos option").length;
                var  y  = $x.get(0)
                y.options[tot] = new Option; 
                y.options[tot].text = $(this).text(); 
                y.options[tot].value = tot; 
               }).remove(); ordenarCombos1();}); 
   	});
   	
   	function ordenarCombos1(){	
		var mylist = $("select#selectGrupos");
		var listitems = mylist.children("option").get();
		listitems.sort(function(a, b) {
   			var compA = $(a).text().toUpperCase();
   			var compB = $(b).text().toUpperCase();
   			return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
		})
		$.each(listitems, function(idx, itm) { mylist.append(itm); });
	}
	function ordenarCombos2(){	
		var mylist = $("select#selectResult");
		var listitems = mylist.children("option").get();
		listitems.sort(function(a, b) {
   			var compA = $(a).text().toUpperCase();
   			var compB = $(b).text().toUpperCase();
   			return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
		})
		$.each(listitems, function(idx, itm) { mylist.append(itm); });
	}

Para la llamada a la función se requieren dos select «selectGrupos» y «selectResult» y cuatro botones agregarTodo, agregar, quitar y quitarTodo

En el siguiente enlace se muestra todo el código, solo se tiene que descomprimir y ejecutar el archivo este-IntercambioDeDatosEntreListas.html en un Explorardor web. eseste-IntercambioDeDatosEntreListas.rar

Paginador javascript

Posted on 9 octubre, 2012 por arieloliva

Este Post describe el código en JavaScript para realiza el paginado de datos, tomados desde un arreglo. Las siguientes imágenes muestra como se vera al ejecutarlo.

Paginador

Paginador 2

Es una modificación que realice a partir de un código de Jorge Zazo de la Encarnación, el cual también se incluye en el paquete de ejemplo que se puede descargar al final del Post.

Paginador Original

En el siguiente recuadro se muestra el código completo con los comentarios de algunas lineas para entender las funciones principales.

function pinta(num,inicio){//función creada por Jorge Zazo de la Encarnación http://www.forosdelweb.com/1201706-post4.html
	//Modificaciones Ariel Oliva arieloliva.com
	var pagNow = inicio;
	var limSup;
	var numPaginasFSt = "";
	var DatoI;
	var DatoF;
	var pagAnt;
	var pagSig;
	var rutaIma=""; //Ruta base de las imagenes
	var numPaginas = misDatos.length /num; //Detecto el número "entero" de páginas
	numPaginas = numPaginas.toString();
	numPaginas = numPaginas.split(".");
	numPaginasF = eval(numPaginas[0]);

	if (misDatos.length % num != 0){ //Si el resultado de la división anterior no es exacto le añado manualmente una página más
		numPaginasF ++;
	}


	if((pagNow + 1) != numPaginasF){//Establezco el número de datos a mostrar si la última página no tiene el mismo número de datos
		limSup = -1;
	} else {
		limSup = (misDatos.length - (numPaginasF * num))-1;
	} 

	DatoI = pagNow * num;//Establezco el dato inicial y el dato final de la paginación
	DatoF = DatoI + (num+limSup);


	if (pagNow == 0){//Establezco cual es la página anterior y la siguiente
		pagAnt = 0;
	} else {
		pagAnt = pagNow - 1;
	}
	if (pagNow == (numPaginasF-1)){
		pagSig = pagNow;
	} else {
		pagSig = pagNow + 1;
	}

	for (i=0;i<numPaginasF;i++){//Pinto la cadena con el número de páginas y sus correspondientes enlaces
		numPaginasFSt += ""+ (i+1) +" ";
	}

	if (primera == 0){//Establezco si es la primera vez que se crean los elementos
		var creo = document.createElement("span");
		document.getElementById("contenido").appendChild(creo);
		var cadena = "

«; for (i=0;i<encabeza.length;i++){//crea cabeceras cadena = cadena + «»; } cadena = cadena + «»; for (DatoI;DatoI<=DatoF;DatoI++){//Pinto todos los elementos con cada dato… cadena = cadena + «» for(j=1;j<=encabeza.length;j++){ var obtDatos = «misDatos[DatoI].dato»+j; cadena = cadena + «»; } cadena = cadena + «» } cadena = cadena + »

«+encabeza[i]+»
«+eval(obtDatos) + «

«; contenido.innerHTML = cadena; var pagina = document.createElement(«span»);//… y la paginación. document.getElementById(«paginacion»).appendChild( pagina); paginacion.innerHTML += »
Primero » +» Anterior » + numPaginasFSt +» Siguiente » +» Ultimo «; primera = 1; } else { borra();//Borro las capas ya pintadas en la primera vez var creo = document.createElement(«span»); document.getElementById(«contenido»).appendChild(creo); var cadena = »

«+encabeza[i]+»
«+eval(obtDatos) + «

«; contenido.innerHTML = cadena; var pagina = document.createElement(«span»);//… y la paginación. document.getElementById(«paginacion»).appendChild( pagina); paginacion.innerHTML += »
Primero » +» Anterior » + numPaginasFSt +» Siguiente » +» Ultimo «; } } function borra(){ contenido.innerHTML = «»; paginacion.innerHTML = «»; }

Para la llamada a la función, primeramente creamos la función «datos«, en la cual pasamos como parámetros la cantidad de columnas que existirán. En la variable «encabeza» agregamos el titulo de cada columna. En el arreglo «misDatos» cargamos los valores con un indice que ira creciendo de acuerdo a la cantidad de registros que deseemos. En el cuerpo del documento deberán existir los div «contenido» y «paginacion«. Finalmente se hace el llamado a la función «pinta(param1,param2)«, donde «param1» es la cantidad de registros que se mostraran por hoja y «param2» es la pagina+1 que se mostrara al cargar el paginador, por ejemplo para que se muestre inicialmente la primera pagina el parámetro deberá valer 0.

Paginación en local

En el siguiente enlace se muestra todo el código, solo se tiene que descomprimir y ejecutar el archivo este-paginadorJavaScript.html en un Explorardor web. eseste-paginadorJavaScript.rar

L	M	X	J	V	S	D
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

ArielOliva

Blog de Ariel Oliva

Archivo de la etiqueta: javascript

Mascara de moneda mientras se escribe

Mascara de moneda en un numero

Intercambio entre listas

Paginador javascript